Как WordPress сайт должен просматриваться на мобильных устройствах

Автор:
Nurlan Kemelbekov

С появлением смартфона, читатели все чаще обращаются к своим мобильным устройствам, чтобы просматривать контент в Интернете. Со своей стороны Вебмастера стараются сделать все возможное, чтобы их сайт открывался на мобильных устройствах.

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

Один способ, который можно использовать — метатег Viewport. Это стандарт, который был разработан Apple, для внедрение в телефон. В настоящее время поддерживается большинством мобильных устройств, в том числе мобильный Ipad и Android. Это позволяет указать уровень уменьшения/увеличение сайта, когда он будет загружен или пользователь может увеличить и даже отключить масштабирование, если захочет.

Например, чтобы установить ширину вашего сайта по ширине устройства, загрузить сайт с 1.0x зумом и дать масштабирования между 0,6 x и 2,4 x, вы должны использовать мета-тег, который идет в header.php.

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

Вы можете либо добавить это вручную в header.php, или использовать функцию, чтобы поместить его там, который я покажу ниже.

Другой пример, чтобы установить ширину устройства на 640 пикселей, высоту 960 пикселей и отключить масштабирование, будет выглядеть следующим образом:

<meta name = "viewport" content = "width = 640, height = 960, user-scalable = no">

Рекомендую почитать. Тестирование сайта для мобильных устройств с Opera Mobil Emulator

Более специфические детали тега видового экрана можно посмотреть на сайте разработчика от Apple, где есть несколько других настроек, которые вы можете сделать. Например, мета-тег apple-mobile-web-app-capable:

<meta name="apple-mobile-web-app-capable" content="yes">

Если содержимое устанавливается в значение «Да», веб-приложение работает в полноэкранном режиме; в противном случае, это не так.

Если хотите использовать функцию, чтобы добавить код выше в head, добавьте что-то вроде этого в плагин функциональности или файл functions.php:

 function maks_viewport_meta_tag() {
echo '<meta name = "viewport" content = "initial-scale = 1.0, maximum-scale=2.4, width = device-width">';
}

add_action ( 'wp_head', 'maks_viewport_meta_tag' );

Если хотите узнать, как при помощи плагина добиться того, чтобы читатели могли просматривать WordPress сайт на мобильных устройствах, рекомендую прочитать статью «Мобильная версия сайта на WordPress«



Вам также может понравиться:


Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

* Copy This Password *

* Type Or Paste Password Here *

4 × пять =

Я просто хотел сказать, как сильно я ценю Ваш комментарий на мой пост. Спасибо Вам !!