Как 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 *

двенадцать + двадцать =

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