Некоторые ошибки при работе с тегом viewport, которые могут негативно отразиться на пользовательском опыте:
- Неправильное размещение тега. 3 Метатег viewport должен находиться внутри блока . 13 Если он по каким-то причинам оказался в блоке , то инструмент проверки может не обнаружить его. 3
- Использование фиксированных значений ширины. 23 Например, если указать ширину 980px, то появится горизонтальный скролл, так как браузер попытается подстроить страницу под заданную ширину. 23 Это неудобно, особенно если на странице много текста. 3
- Запрет масштабирования. 23 Спецификация HTML не рекомендует полностью запрещать возможность масштабирования. 3 В большинстве случаев рекомендуется не ограничивать пользователю возможность масштабировать страницу. 3
- Использование «initial-scale=1» для неадаптивных шаблонов. 5 С такой установкой страница будет отображаться в масштабе 100%, в неадаптивном дизайне пользователю придётся устанавливать масштаб вручную или прокручивать. 5
- Использование «user-scalable=no» или «initial-scale=1» вместе с «maximum-scale=1» на неадаптивных шаблонах. 5 Это отключит масштабирование страницы, а без него пользователь не сможет увидеть всю страницу сайта. 5
Чтобы избежать ошибок, рекомендуется проверять работу viewport с помощью специальных инструментов, например «Проверка оптимизации для мобильных» от Google или «Яндекс.Вебмастер». 1