Разное

Как настроить viewport для мобильной версии сайта на CMS WordPress?

Не удаётся приблизить картинки и текст на смартфоне? w3.org выдаёт предупреждение? Самое время узнать, как настроить viewport для мобильной версии сайта на CMS WordPress!

Самая частая проблема, которая мешает нормальному восприятию сайта — ограничение возможностей пользователей со стороны разработчика. Например, принудительное ограничение возможности приближение текста статьи и фотографий в ней. Чаще всего это происходит из-за настройки темы WordPress, об особенностях работы которой начинающий вебмастер имеет весьма расплывчатое понятие.

Как бы там ни было, если проблема не лежит в каких-то сомнительных плагинах и иных «костылях», то самый типичный способ «устранить этот баг» — отправиться в редактор тем и изменить настройки viewport. Об этом я расскажу ниже, надеюсь, этот способ вам поможет!

Для чего используется мета-тег viewport?

Мета-тег viewport применяется для оптимизации сайтов, просматриваемых на мобильных устройствах. Проблемы с приближением возникают из-за его неправильной настройки или оптимизации под веб-приложения, не предполагающих увеличение элементов или интерфейса со стороны пользователя.

Как настроить viewport для мобильной версии сайта на CMS WordPress?

Открыть редактор тем. Для этого зайти на сайт и найти раздел «Внешний вид». Именно там в консоли CMS WordPres версии 5.4 находится «Редактор тем». В редакторе выбрать активную тему (в моём случае это «Ashe Pro») и найти в ней «Header.php». В «Header.php» в самом верху (между <head> и </head>) будет находиться строка, имеющая следующий вид: «<meta name=»viewport» />«. Если этой строки нет, её необходимо создать. Достаточно добавить следующий код, чтобы любые элементы в статье сохраняли адаптивность (автоматически подгонялись под размер экрана), но при этом могли свободно приближаться пользователем:

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

В итоге пользователь по умолчанию будет получать картинку, как в примере ниже (с поправкой на ваш дизайн):

Как настроить viewport для мобильной версии сайта на CMS WordPress (пример без масштабирования страницы)
Как настроить viewport для мобильной версии сайта на CMS WordPress? Используя код выше, вы адаптируете страницу для смартфонов, но при этом сохраните возможность масштабирования.

Страницу можно будет увеличить хоть в 1,5 раза, хоть в 5, что позволит пользователю не открывать фото в отдельном окне. Другое преимущество — возможность просматривать слишком мелкий или слишком крупный текст так, как будет удобно читателю:

Как настроить viewport для мобильной версии сайта на CMS WordPress и Ashe Pro, пример страницы со свободным масштабированием
Подобные настройки мета-тега viewport позволяют свободно приближать страницы, улучшая пользовательский опыт.

Всё тоже самое, но пошагово:

Как настроить viewport для мобильной версии сайта на CMS WordPress (первый шаг - переход в редактор тем в консоли сайта)
Как настроить viewport для мобильной версии сайта на CMS WordPress? Шаг 1 — перейти в редактор тем в консоли сайта!
Как настроить viewport для мобильной версии сайта на CMS WordPress в редакторе тем на базе Ashe Pro, модифицируя header.php
Как настроить viewport для мобильной версии сайта на CMS WordPress? Шаг 2 — изменить или добавить мета-тег! Пример модификации Header.php в теме Ashe Pro.

Что обозначает код в настройках мета-тега viewport?

Код выше автоматически масштабирует страницы под размер экрана с помощью width=device-width, подсказывая браузеру, что пользователю необходимо продемонстрировать область просмотра, равную ширине экрана смартфона. initial-scale=1.0 задаёт ширину экрана и начальный масштаб.

Конечно, можно задать фиксированный размер, например, указав content="width=320px, либо изменить начальный масштаб, переназначив initial-scale до 0.3 или 9.0, но смысл? Во-первых, все устройства имеют разный размер, что может некорректно сработать на всём, что отличается по параметрам в большую или меньшую сторону, а во-вторых, это не слишком удобно для пользователя. Поэтому лучше воздержаться от таких экспериментов.

Теперь вы знаете, как настроить viewport для мобильной версии сайта на CMS WordPress и темы Ashe Pro. Дальше можно не читать, ведь в тексте статьи будут рассматриваться дополнительные аспекты: например, код, вызывающий проблемы с масштабированием и другие примеры в подобном ключе.

Как ограничить максимальный масштаб (приближение) текста в мобильной версии сайта с помощью мета-тега viewport?

Назначить значение максимального приближения, например, maximum-scale=1.0. Вместо «1.0» вы можете установить любое значение, 2, 3 или 10 — как вам будет удобнее. «1.0» не будет позволять увеличить текст и изображения в мобильной версии сайта (не распространяется на AMP), «2.0» позволит увеличить что-либо лишь в два раза, и так далее.

Тем не менее, не рекомендую это делать. Во-первых, это ограничение может раздражать пользователей, которые хотят что-то рассмотреть в подробностях, не открывая изображение в новой вкладке. Во-вторых, некоторым людям будет проще уменьшить или увеличить текст при чтении, а различные программные запреты будут в их глазах жирным минусом. В-третьих, при анализе сайта это будет указываться в качестве ошибки HTML. Используйте подобное только в том случае, если это действительно необходимо!

Выше вы читали, как настроить viewport для мобильной версии сайта на CMS WordPress, ознакомились с тем, что может мешать просмотру, а теперь пора рассказать о таких настройках, которые гарантированно добавят 1 ошибку при анализе сайта на ошибки валидации HTML с помощью w3.org.

При каких настройках viewport на мобильной версии сайта не будeт приближаться текст и картинки?

Как правило, если в мобильной версии сайта невозможно изменить размер текста или приблизить картинки, код будет выглядеть следующим образом:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

Либо вот так:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

Второй случай я уже рассматривал, о первом нужно будет рассказать чуть подробнее, но сначала хочу упомянуть о другом: используете ли вы maximum-scale=1.0 или user-scalable=no, это гарантированно добавит 1 ошибку при валидации HTML. Текст ошибки будет звучать так: «Consider avoiding viewport values that prevent users from resizing documents» (Не используйте значения области просмотра, которые не позволяют пользователям изменять размеры документов).

В первом случае код настраивает ширину страницы по размеру пользовательского устройства (width=device-width), не позволяет масштабировать страницы и любые вложения (maximum-scale=1.0), запрещает любое пользовательское масштабирование (maximum-scale=1.0), кроме горизонтального или вертикального проматывания.

Во втором — всё тоже самое, но без запрета пользовательского масштабирования (фактически, масштабирование всё равно не будет работать).

Обычно подобные параметры используются для мобильных приложений. В большей части случаев жёсткие ограничения, прописанные в мета-теге viewport, абсолютно избыточны и излишни!
Как настроить viewport для мобильной версии сайта на CMS WordPress (пример статьи без изменения кода в мета-теге)
Как настроить viewport для мобильной версии сайта на CMS WordPress? Явно не таким способом! Если в настройках мета-тега будет прописан код выше, пользователь не сможет приблизить фото и их придётся открывать в отдельной вкладке.

Если в вашем сайте на основе CMS WordPress используются подобные настройки, лучше сразу переписать их на ту версию, которая указана в начале статьи.

Если вы дочитали до этого момента, вы знаете практически всё о том, как настроить viewport для мобильной версии сайта на CMS WordPress, включая основные значения кода, использующегося в мета-теге, а также параметры, при которых контент будет ограничен по масштабу и не сможет увеличиваться пользователем. Надеюсь, эта статья была достаточно информативной!

Понравилась статья? Поддержите автора донатом, заказом фотосессии или покупкой фото!

Делитесь публикацией с друзьями, пишите комментарии, подписывайтесь в Twitter, Instagram и на других страницах, чтобы первыми видеть всё самое интересное!

Смотрите также:

Фотограф, гик, ретушёр.

2 комментария

  • Иван Сурков

    Спасибо, как раз столкнулся с такой проблемой! Благодаря вам всё исправил за пару минут!

Leave a Reply

Ваш адрес email не будет опубликован.