Блог

Как отобразить настольную версию на экранах мобильных устройств в Bootstrap 3? Я не хочу ссылку для переключения настольной / мобильной версии. Я просто хочу показать настольную версию на экранах мобильных устройств.

Чтобы было понятно, я хочу, чтобы веб-сайт был адаптивным на планшетах, но на @media screen max-width: 360px показывал настольную версию. Я знаю, что это странно, но мой клиент хочет этого, и я понятия не имею, почему!

Спасибо!

Если вы хотите это сделать, вам придется динамически изменять тег вашего окна просмотра в зависимости от ширины экрана.

viewport Мета-тег — это то, что делает возможным адаптивный дизайн на мобильных устройствах, заставляя браузер использовать device-width в качестве ширины окна просмотра. При снятии этого ограничения большинство мобильных устройств будут лгать о своей ширине, чтобы получить полный сайт. С помощью javascript вы можете динамически изменять ее в зависимости от ширины страницы

Начните с включения тега в свой HTML head элемент:

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

Затем мы прослушаем событие изменения размера и изменим область просмотра в соответствии с вашими бизнес-правилами:

 $(window).resize(function() {
    var mobileWidth =  (window.innerWidth > 0) ? 
                        window.innerWidth : 
                        screen.width;
    var viewport = (mobileWidth > 360) ?
                    'width=device-width, initial-scale=1.0' :
                    'width=1200';
    $("meta[name=viewport]").attr('content', viewport);
}).resize();      
  

Вот рабочая демонстрация в Fiddle

Примечание: настольные браузеры игнорируют тег viewport, поэтому это никак не повлияет на вашу машину разработки. Чтобы протестировать эти изменения, вы можете открыть инструменты Chrome debugger и эмулировать мобильное устройство.

Вот скриншот:

При всем сказанном я бы поработал с вашим пользователем, чтобы посоветовать против этого.
Вот краткая статья, которую я только что прочитал о добавлении кнопки переключения рабочего стола для мобильных устройств

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

Да, вы, очевидно, можете программировать lg , sm и xs вести себя одним способом и только md другим способом.

Таким образом, у вас будет что-то вроде:

 <div class="col-lg-12 col-md-6 col-sm-12 col-lx-12">...<div>
  

Также не забывайте о метатеге viewport. Это несколько поможет при рендеринге на небольших устройствах.

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

или измените в соответствии с вашими потребностями.

Таким образом, фактическая ширина страницы определяется .container . Итак, я никогда не пробовал это, но вместо модификации JavaScript, я думаю, вам следует сделать:

 @media (max-width: 360px) {
  .container {
    width: 1170px;
  }
}
  

Это должно быть 1170 пикселей, чтобы соответствовать col-lg или 970 пикселей, чтобы соответствовать col-md. Убедитесь, что приведенное выше указано НИЖЕ вашего bootstrap include, чтобы оно переопределяло, и это должно сработать.

Затем сделайте так, чтобы ваши (col-md или col-lg) и col-xs имели одинаковую ширину столбцов значений и отличались от вашего col-sm для планшетов, и все должно выровняться, например

 <div class='col-md-6 col-xs-6 col-sm-12'>full-width tablet, half others</div>
<div class='col-md-3 col-xs-3 col-sm-6'>half-width tablet, 1/4 others</div>
<div class='col-md-3 col-xs-3 col-sm-6'>half-width tablet, 1/4 others</div>