Как настроить 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" />В итоге пользователь по умолчанию будет получать картинку, как в примере ниже (с поправкой на ваш дизайн):
Страницу можно будет увеличить хоть в 1,5 раза, хоть в 5, что позволит пользователю не открывать фото в отдельном окне. Другое преимущество — возможность просматривать слишком мелкий или слишком крупный текст так, как будет удобно читателю:
То же самое, но пошагово:
Что обозначает код в настройках мета-тега 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, абсолютно избыточны и излишни!
Если в вашем сайте на основе CMS WordPress используются подобные настройки, лучше сразу переписать их на ту версию, которая указана в начале статьи.
Если вы дочитали до этого момента, вы знаете практически всё о том, как настроить viewport для мобильной версии сайта на CMS WordPress, включая основные значения кода, использующегося в мета-теге, а также параметры, при которых контент будет ограничен по масштабу и не сможет увеличиваться пользователем. Надеюсь, эта статья была достаточно информативной)
Понравилась статья? Делитесь публикацией с друзьями, пишите комментарии, подписывайтесь на Telegram, Boosty и другие страницы, чтобы первыми видеть всё самое интересное!
Tengyart
Профессиональный фотограф из Приморского края. Работаю в Находке, Владивостоке и Золотой Долине. Пишу статьи о фото и гик-культуре, в том числе про аниме, игры, путешествия и генеративные нейросети. Фотографии выкладываю на рабочей странице (https://olegmorozfoto.ru/) и в Telegram (https://t.me/tengy_photos). Всегда рад новым читателям, подписчикам и клиентам! ✨❤️
6 комментариев
Кот Шрёдингера
Здравствуйте. Статья хорошая, но у меня проблема не решена. Проверял блог на наличие ошибок (через PageSpeed Insights), и программа указала, что у меня не настроен параметр viewport. Стал гуглить, нашёл несколько похожих статей, добавил метатэг viewport так, как рассказываете вы. На компе внешний вид без изменений, а вот в мобилке всё поехало. Без viewport на экране смартфона страницы выглядят лучше. Ума не приложу, что делать(((
Tengyart
Очень жаль, что не смог вам помочь(
Надеюсь, вы найдёте решение проблемы где-нибудь ещё!
P.S. Если найду / замечу какой-либо полезный материал, который сможет вам пригодится, сразу вам напишу. Прямо сейчас тоже ничего путного в голову не приходит.
Павел
Добрый день! Спасибо Вам большое! Все сделал, масштабирование работает на всех мобильных браузерах) И без всяких дополнительных плагинов)
Tengyart
Вам спасибо)
Иван Сурков
Спасибо, как раз столкнулся с такой проблемой! Благодаря вам всё исправил за пару минут!
Tengyart
Рад, что сумел помочь! Вам спасибо за комментарий)