Проблема с выезжающим меню при зуме страницы Как исправить?

Question

[JackShcherbakov]

Здравствуйте!

На сайте есть выезжающее меню, которое доступно пользователю, только если ширина экрана менее или равна 1024px:

Это меню можно показать либо кликнув по гамбургеру (3 линии в header):



либо же, если юзер сидит с телефона или устройства с touch-дисплее, то он может свайпнуть вправо и тогда меню появится из левой части экрана:



Алгоритм свайпа таков:

1) Юзер касается экрана
2) Проводит в правую минимум 20px и только тогда мы понимаем, что юзер действительно хочет его открыть
3) Юзер начинает двигать пальцем по экрану вправо
4) Меню начинает постепенно появляться. То есть 80px двинули пальцем - на 80px двинули меню
5) Если юзер провел пальцем хотя бы 100px (в таком случае меню не будет до конца показано), то мы автоматом "додвигаем" меню до конца вправо.
6) Меню показано!

Проблема:

Проблема заключается в том, что у нас дизайн не выдерживает экраны менее 357px, и поэтому у body прописан min-width 357px

В результате чего, при загрузке страницы на телефонах с маленьким экраном (например, iphone 5), страница автоматически зумится.

И когда юзер просто скролит страницу влево, то меню тоже появляется. Это очень неудобно. То есть он не видет, например, начало какого то текста, то ему надо отскроллить влево (то есть сделать свайп вправо) и тут начинает вылезать это меню.

Как быть?

ссылка: websitebuilder.su/workfox

Проблема полностью исчезнет, если запретить зум на мобилках.

Заранее выражаю огромную благодарность всем, кто поможет!

Comments

[Ankhena]

Плохой вариант:
Менять вьюпорт с device-width на фиксированную ширину при окне меньше 357.

Хороший вариант:
Переделать дизайн под смартфоны.

[JackShcherbakov]

Ankhena, спасибо за ответ. Но дизайн вряд ли получится поменять. Там более 180 артбордов. Я дизайнеру написал, посмотрим, что скажет. Благо хороший человек. Я думаю, что под еще меньшие устройства не получится сделать дизайн без потери элементов сайта (то есть чтобы ничего не съезжало что-то надо будет убрать). В общем, посмотрим, может быть действительно сам дизайн поменяем.

Я не совсем понял про "плохой вариант". Можете пример привести? Я так понял вы про эту строчку говорите:

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

[Ankhena]

JackShcherbakov,

Но дизайн вряд ли получится поменять.

Поскольку, устройств с вьюпортом, например, 320 полно, то менять дизайн/интерфейс это самое разумное решение.

Я так понял вы про эту строчку говорите:

Да, про нее.
На js при ширине 357 и меньше заменяете на
<meta name="viewport" content="width=357">

[JackShcherbakov]

Ankhena, я тут набросал код. До ума пока не довел, пока криво работает:

(function(){

  function check(){

    if(document.body.clientWidth<357){

      //replace old meta tag with new meta tag

      var old_meta_viewport = document.querySelector('meta[name="viewport"]');

      var old_meta_viewport_parent = old_meta_viewport.parentElement;

      var new_meta_viewport = document.createElement("META");

      new_meta_viewport.setAttribute("name", "viewport");
      new_meta_viewport.setAttribute("content", "width=357");

      var new_meta_viewport = old_meta_viewport_parent.replaceChild(new_meta_viewport, old_meta_viewport);

    }
    else{

      var old_meta_viewport = document.querySelector('meta[name="viewport"]');

      var old_meta_viewport_parent = old_meta_viewport.parentElement;

      var new_meta_viewport = document.createElement("META");

      new_meta_viewport.setAttribute("name", "viewport");
      new_meta_viewport.setAttribute("content", "width=device-width, initial-scale=1");

      var new_meta_viewport = old_meta_viewport_parent.replaceChild(new_meta_viewport, old_meta_viewport);

    }

  }

  check();

  window.addEventListener('resize', function(e){

    check();

  });

})();

Я просто не понимаю разницы между этим и банальным min-width. Что там горизонтальный скролл, что тут. В обоих вариантах проблема не пропадает - горизонтальный скролл остается. Или же я что-то упускаю?

[Ankhena]

JackShcherbakov, возьмите и руками напишите мета вьюпорт с фикс шириной. Останется прокрутка?

(function () {
  var width = screen.width;
  var oldViewport = document.querySelector('meta[name="viewport"]');
  var viewport = document.createElement('meta');
  viewport.setAttribute('name', 'viewport');
  viewport.setAttribute('content', 'width=' + (width <= 320 ? '320' : 'device-width'));
  document.head.replaceChild(viewport, oldViewport);
})();

ширину свою поставьте

[JackShcherbakov]

Ankhena, я вручную прописывал - прокрутка остается. Подключил скрипт что вы выше прислали (ширину свою поставил), зашел в devtools в chrome, включил режим просмотра через моб. устройства (не знаю как это точно называется), выбрал iphone5 - все равно прокрутка остается. На последок решил загрузить на хостинг и зайти с реального устройства и случилось чудо - прокрутки нет. Но теперь другая проблема, если я переверну телефон, то должна быть другая версия (т.к по идее другие медиа запросы срабатывать должны). Но этого не происходит, так как ваш скрипт строго привязан к screen.width. Я думаю в моем случае надо цепляться именно за ширину области просмотра. Также надо убирать content="width=357" и ставить обратно content="width=device-width, initial-scale=1" если ширина просмотра увеличилась.

В общем, спасибо вам большое за ответ, а точнее за решение моего вопроса. Текущую проблему я думаю легко будет решить, надо просто js немного переписать.

Оставьте ваш ответ ниже, в блоке для ответов, чтобы я мог пометить ваш ответ решением.

[Ankhena]

JackShcherbakov, так функцию надо на ресайз еще повесить, чтобы снова проверял ширину.

[JackShcherbakov]

Да, вы правы. Я сделал как вы сказали. Но все равно при приведении устройства в горизонтальное положение, сайт показывается как при вертикальном просмотре. Дело в том, что скрипт учитывает именно screen width

(function () {

  function check(){

    alert("screen.width = " + screen.width);

    var width = screen.width;
    var oldViewport = document.querySelector('meta[name="viewport"]');
    var viewport = document.createElement('meta');
    viewport.setAttribute('name', 'viewport');
    viewport.setAttribute('content', 'width=' + (width <= 357 ? '357' : 'device-width'));
    document.head.replaceChild(viewport, oldViewport);

  }

  check();

  window.onresize =  check;

})();

Я alert прописал чтобы на телефоне видеть значение screen.width. Так вот, как бы я не крутил телефон, значение всегда одинаковое, как я и ожидал. Именно поэтому даже при горизонтальном просмотре меняется метатег. Надо просто ширину экрана заменить на ширину просмотра. И тогда все по идее должно заработать.

[Ankhena]

JackShcherbakov, логично