Bootstrap 3 - просмотр рабочего стола на мобильном устройстве

Можно ли показать загрузочный сайт в качестве настольной версии, когда на мобильном устройстве?

В основном на странице будут отображаться видовые экраны 992px или 1200px вместо небольших устройств.

Например, BBC позволяет переключаться между мобильным и настольным сайтами с помощью ссылки внизу страницы, что я хотел бы сделать.

Спасибо, Лиам

Ответы

Ответ 1

Вам просто нужно установить видовой экран

Создайте ссылку, как вы сказали, и эта ссылка является перезагрузкой страницы, но с параметром ?desktop_viewport=true, тогда вы можете установить сеанс, и, пока этот сеанс установлен, вы пишете это

<meta name="viewport" content="width=1024">

Вместо этого (Отзывчивая версия)

<meta name="viewport" content="width=device-width, initial-scale=1.0">

В твоей <head>

Используйте это как кнопку

<a href="mywebsite.php?show_desktop_mode=true">I want desktop mode!</a>

И вставьте это вверху вашего php файла (ведьма должна быть загружена на каждой странице)

<?php
session_start();
if($_GET['show_desktop_mode'] == 'true') {
    $_SESSION['desktopmode'] = 'true';
}
?>

После этого вы должны изменить область просмотра в соответствии со значением Session, выполнив это в <head>

<?php
if($_SESSION['desktopmode'] == 'true') {
    /* DESKTOP MODE */
    ?>
    <meta name="viewport" content="width=1024">
    <?php
} else {
    // DEFAULT
    ?>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <?php
}
?>

Ответ 2

Вы можете переключать классы, отвечающие за Bootstrap, используя jQuery. Например,

/* toggle layout */
$('#btnToggle').click(function(){
    if ($(this).hasClass('on')) {
        $('#main .col-md-4').addClass('col-xs-4').removeClass('col-md-4');
        $(this).removeClass('on');
    } else {
        $('#main .col-xs-4').removeClass('col-xs-4').addClass('col-md-4');
        $(this).addClass('on');
    }
});

Демо: http://www.bootply.com/121943

Ответ 3

Я использую адаптивные селектор сетки и создал рабочий стол на моей странице. Во-первых, видовое окно должно быть изменено, как указано ранее, на

<meta name="viewport" content="width=1024">

но это само по себе не изменяет поведение селекторов сетки. Страница более широка в мобильном режиме, но у нее все еще есть мобильная компоновка. Чтобы изменить это, я взял копию из bootstrap.css и назвал ее bootstrap-non-responsive.css. В этом файле я изменил все точки торможения разных видов на ширину 1 px.

Это можно сделать, изменив все строки с помощью ключевого слова @Media. Например.

@media (min-width: 768px) {

необходимо изменить на

@media (min-width: 1px) {

Можно воспользоваться несколькими заменами одних и тех же текстов, и легко и быстро изменить файл css, если вы понимаете, как работает функция загрузки Bootstrap. Возможно также удалить некоторый код из css файла, но это не нужно, просто оптимизация.

В последнее время я создал ссылку для переключения вида рабочего стола (используемый класс "hidden-lg" ), который создал файл cookie для сохранения выбора вида. Если был выбран вид рабочего стола. Я изменил обычный код:

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap-3.2.0/css/bootstrap.min.css">

<meta name="viewport" content="width=1024">
<link rel="stylesheet" href="bootstrap-3.2.0/css/bootstrap-non-responsive.css" />

Если был выбран вид рабочего стола, я показал ссылку на мобильное представление, которое удалит куки файл и переключится на отзывчивый вид.

Ответ 4

Да, просто не используйте селектор селекторных наборов Bootstrap.

Ответ 5

"Поверните любую схему сетки фиксированной ширины в макет полной ширины, изменив внешний край .container на .container-fluid."

Документы говорят добавить класс .container-fluid., чтобы сделать его текучим, поэтому, удалив его, вы можете остановить его.

вы можете использовать jQuery для изменения классов.

<a id="js-switch">switch to desktop</a>

    <script>
       $("#js-switch").on('click', function(event) {
            event.preventDefault();
            /* Act on the event */
            $("#container-id").removeClass('container-fluid');
            $("#container-id").addClass('container');
       });
    </script>

Ответ 6

У меня есть сайт WordPress с темой, основанной на начальной загрузке, и я хочу иметь полную панель навигации вместо значка гамбургера при включении режима рабочего стола в Android.

Как это возможно и какие файлы я должен загрузить здесь?