Можно ли сделать переключатель с Desktop View на Mobile View?

381

09 февраля 2017, 03:03

Имеется сайт opencart на boostrap с responsive темой, возможно ли сделать переключатель чтоб с desktop версии уходил на mobile и наоборот, можно ли обойтись малой кровью допустим подменять <meta> тэг только, или надо лапатить весь boostrap с его viewport @media ? или мудрить js чтоб выкидывал классы типа hidden-xs а на desktop версию наоборот hide(), вообщем хотел бы послушать умных людей :)

Answer 1

Вам, возможно, пригодится вот это

На странице делаете инклюд - это один файл на php. И условие. Например

<?php 
    include 'mobile_detect.php';
    $detect = new Mobile_Detect();
    if ($detect->isMobile()) {
        //код
    } 
?>

Вообще там в примерах всё есть на сайте. Можно детектить удобно и быстро браузеры, типы устройств, ОС и др.

Answer 2

Бутстрап определяет стили по принципу «mobile first». Стили для мобильного — это стили до первого брейкпоинта.

На официальном сайте можно собрать собственный Бутстрап, увеличив все брейкпоинты в 10 раз. Тогда десктопы попадут в интервал xs вместо lj.

Останется вытащить из полученной сборки bootstrap.css и по кнопке менять стили с обычных на покорёженные и обратно. На SO есть варианты переключателей. Получится, например, так:

http://codepen.io/glebkema/pen/ggdmax

var $style = $('#style'); 
var $switcher = $('#switcher'); 
var cssUsual = 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'; 
var cssMobile = 'http://glebkema.ru/dist/css/mobile/bootstrap-mobile.css'; 
 
$switcher.click(function() { 
  if ($switcher.hasClass('btn-primary')) { 
    $style.attr('href', cssMobile); 
    $switcher.removeClass('btn-primary').addClass('btn-warning').text('Переключить на обычный'); 
  } else { 
    $style.attr('href', cssUsual); 
    $switcher.removeClass('btn-warning').addClass('btn-primary').text('Переключить на мобильный'); 
  } 
});

.row-demo { 
  margin-top: 32px; 
} 
.row-demo > div { 
  background: #69c; 
  color: #fff; 
  font-size: 24px; 
  font-weight: bold; 
  line-height: 100px; 
  text-align: center; 
} 
.row-demo > div:nth-child(3n+2) { background: #c69; } 
.row-demo > div:nth-child(3n+3) { background: #9c6; }

<link id="style" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<nav class="navbar navbar-default"> 
  <div class="container"> 
    <div class="navbar-header"><button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#bs-navbar" aria-expanded="false"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
      </button><a href="" class="navbar-brand">Brand</a></div> 
    <div id="bs-navbar" class="collapse navbar-collapse"> 
      <ul class="nav navbar-nav"> 
        <li><a href="">Left</a></li> 
        <li class="dropdown"> 
          <a href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
          <ul class="dropdown-menu"> 
            <li><a href="">Item</a></li> 
          </ul> 
        </li> 
      </ul> 
      <ul class="nav navbar-nav navbar-right"> 
        <li><a href="">Right</a></li> 
      </ul> 
    </div> 
  </div> 
</nav> 
 
<div class="text-center"> 
  <button id="switcher" type="button" class="btn btn-primary btn-lg"  <button id="switcher" type="button" class="btn btn-primary btn-lg">Переключить на мобильный</button> 
</button> 
</div> 
 
<div class="container"> 
  <div class="row row-demo"> 
    <div class="col-sm-2">1</div> 
    <div class="col-sm-2">2</div> 
    <div class="col-sm-2">3</div> 
    <div class="col-sm-2">4</div> 
    <div class="col-sm-2">5</div> 
    <div class="col-sm-2">6</div> 
  </div> 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 3

В чем проблема то? Проверяешь (если нужно) телефон или десктоп и выводишь соответствующие стили css. Подсказываю if поможет. Ну, а если просто свич, как по задаче - делаешь переключатель и если нажалась кнопка, ну скажем "Перейти на мобильную версию сайта", то по нажатию добавлять куку с именем "mobile" и значением "1" к примеру или для наглядности куку с именем "device_type" и значениями либо mobile", либо "tablet", либо "pc". Потом делаешь проверку на существование (isset), заполненность (!empty) и в зависимости от типа загружать нужный стиль. Все. Изи же))