user-scalable=no и maximum-scale=1 в meta viewport: почему это вредно и как убрать
Что это значит
В служебной строке meta viewport стоит запрет увеличения: user-scalable=no (или 0) либо maximum-scale меньше 2. Из-за этого страницу нельзя увеличить жестом двумя пальцами.
Чем мешает
Людям со слабым зрением и всем, кто хочет рассмотреть фото товара, мелкую надпись или схему проезда, приходится уходить с сайта. Проверки доступности и Lighthouse в PageSpeed считают это ошибкой.
Как исправить
WordPress
- Строку обычно добавляет тема (header.php) или плагин. Найдите в шаблоне
user-scalable=noиmaximum-scaleи удалите их — проще всего попросить разработчика или поддержку темы. - Если строку добавляет плагин «мобильной версии» или AMP, проверьте его настройки.
Tilda
- Tilda не запрещает увеличение сама. Если запрет есть, его добавили своим кодом: проверьте «Настройки сайта → Ещё → HTML-код для вставки в head» и блоки T123.
1С-Битрикс
- Строка находится в header.php шаблона сайта. Удалите из неё
user-scalable=noиmaximum-scale=1— это правка для разработчика на пару минут.
OpenCart
- Строка находится в шаблоне темы (header.twig или header.tpl). Удалите из неё
user-scalable=noиmaximum-scale.
Другой движок или свой сервер
- Замените строку meta viewport в
<head>на вариант из примера ниже — без user-scalable и maximum-scale.
Пример кода
Замените example.by на адрес своего сайта.
<meta name="viewport" content="width=device-width, initial-scale=1">Запрет часто ставят, чтобы iPhone не увеличивал страницу при нажатии на поле ввода. Правильное решение — шрифт в полях ввода не меньше 16 px, тогда увеличения не будет и без запрета.
Если сайт делал подрядчик
Перешлите ему ссылку на отчёт и эту просьбу:
В meta viewport на сайте запрещено увеличение страницы (user-scalable=no или maximum-scale меньше 2). Уберите, пожалуйста, эти параметры: должна остаться строка <meta name="viewport" content="width=device-width, initial-scale=1">.
Как проверить, что всё исправлено
Проверьте сайт снова на yasnoseo.by.