Что это
Эта проверка касается того же мета-тега viewport, объяснённого более технически в нашем другом руководстве по viewport, но с точки зрения того, что на самом деле испытывает мобильный посетитель: без него браузер телефона предполагает, что страница построена для гораздо более широкого настольного экрана, и сжимает всё, чтобы уместить, что приводит к крошечному, трудночитаемому тексту и макету, требующему постоянного щипания и прокрутки только для нормального чтения.
Для большинства сайтов сегодня, особенно с уже действительно адаптивным дизайном, это чисто проблема отсутствующей настройки, а не проблема дизайна — адаптивный макет существует, ему просто никогда не дали шанс активироваться.
Почему это важно
На большинстве сайтов сегодня мобильные посетители составляют более половины всего трафика, поэтому такая фундаментальная проблема мобильного рендеринга — не мелкий крайний случай, а очень часто затрагивает большинство всех, кто вообще посещает сайт. Посетитель, попадающий на страницу, которая выглядит сломанной, тесной и трудной для навигации на его телефоне, значительно более склонен уйти немедленно, чем бороться со щипанием и масштабированием, чтобы прочитать текст нормального размера.
Поскольку эта конкретная проблема так визуально очевидна в момент проверки (просто откройте сайт на телефоне), это также одна из самых быстрых вещей для подтверждения исправления после того, как основная настройка исправлена.
Как это исправить
- Откройте свой сайт на реальном телефоне или используйте встроенный предпросмотр мобильного/панель инструментов устройства вашего браузера (обычно доступную в инструментах разработчика).
- Если страница выглядит как сжатый настольный макет, а не правильно масштабированный мобильный макет, эта настройка, весьма вероятно, является причиной.
- Смотрите наше техническое руководство по viewport для точного исправления кода — один тег
<meta name="viewport">решает это практически в каждом случае. - Если вы на конструкторе сайтов, это устанавливается автоматически платформой почти во всех случаях — сломанный мобильный вид там обычно указывает вместо этого на пользовательскую вставку кода, которая с этим конфликтует.
- Перепроверьте страницу на телефоне после исправления, чтобы убедиться, что текст и макет теперь правильно масштабированы без необходимости увеличивать масштаб.