В 2024 году невозможно представить сайт без его мобильной версии, и это понятно, ведь все меньшее количество пользователей у ПК, и все большее – у мобильных гаджетов.
Мета тэги для мобильной версии
Добавление следующих мета-тегов влияет на то, как веб-приложение будет отображаться и функционировать на устройствах Apple, таких как iPhone и iPad:
<meta name="apple-mobile-web-app-capable" content="yes">:- Этот мета-тег указывает Safari на iOS, что ваш сайт может быть запущен как веб-приложение. Когда пользователь добавляет сайт на домашний экран, он может открыть его как отдельное приложение без элементов управления браузера (таких как адресная строка и навигационные кнопки).
- Преимущество: Веб-приложение будет занимать весь экран устройства, создавая более аутентичный опыт работы с приложением.
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">:- Этот мета-тег задает стиль строки состояния (статус-бара) при запуске веб-приложения в полноэкранном режиме.
- Возможные значения:
default— строка состояния имеет стандартный вид (обычно белый текст на черном фоне).black— строка состояния становится черной.black-translucent— строка состояния становится черной и полупрозрачной, а содержимое страницы поднимается до самой верхней границы экрана.
А что насчет мобильной версии сайта для Android ?
Вы можете использовать эти мета-теги вместе и одновременно в вашем HTML-коде. Они предназначены для улучшения пользовательского опыта на мобильных устройствах, и не имеют конфликтующих зависимостей между Android и iOS.
Эти мета-теги добавляются в <head> вашей HTML-страницы и помогают настроить поведение вашего веб-приложения на мобильных устройствах, вот конечный вариант:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="mobile-web-app-capable" content="yes"> <!-- Для Android -->
<meta name="apple-mobile-web-app-capable" content="yes"> <!-- Для iOS -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<!-- Для iOS, стиль строки состояния --> Поясняющие комментарии из кода можно удалить, думаем, это понятно.
Как убрать блоки в мобильной версии ?
Частый вопрос от начинающих администраторов сайтов на WordPress:
Как на WordPress убрать блоки категорий и поиска в мобильной версии ? Или как убрать тот или иной блок в мобильной версии сайта на WordPress ?
Чтобы убрать отображение блоков с категориями или поиском в сайте на WordPress (или иных прочих блоков) вы можете воспользоваться изменениями в стилях CSS, и/или добавить JavaScript код.
Например, на нашем сайте блок с категориями имеет такой код, нам нужно только начало, чтобы выяснить его идентификатор. Открыв просмотр исходного кода и найдя нужное место, мы видим:
<aside id="categories-1" class="widget widget_categories">
<h2 class="widget-title">Категории</h2>
<nav aria-label="Категории">Здесь мы искали идентификатор – #categories-1.
Если предложенный ниже JavaScript код уже успешно скрывает блок категорий на мобильных устройствах, то CSS может быть не обязательным. Однако, для хорошей практики и повышения производительности, рекомендуется использовать CSS для таких задач, поскольку он обрабатывается быстрее браузером.
Если хотите использовать только один метод, JavaScript уже достаточно. Однако, для полной гибкости и резервного плана в случае отключенного JavaScript у пользователя, мы рекомендуем все же добавить и CSS код.
Вариант с использованием только CSS:
Если вы хотите попробовать обойтись только CSS, используйте следующее правило:
@media (max-width: 768px) {
aside#categories-1 {
display: none; !important;
}
}
Если, к примеру, у вас блок реализован не через тэг “aside”, а через “div”, то правило будет таким: div#categories-1
Вариант только с CSS часто не работает, так как в WordPress другие стили темы часто переопределяют ваш код.
Вариант с использованием только JavaScript:
Если вы решили оставить только JavaScript, убедитесь, что он надежно работает. Вставьте этот код в HTML код вашего сайта, например, в файл header.php, в самый его конец:
<script>
jQuery(document).ready(function($) {
if ($(window).width() <= 768) {
$('#categories-1').hide();
}
});
</script>
Для работы нашего JavaScript кода необходимо, чтобы на сайте была подключена библиотека jQuery. Обычно WordPress уже включает jQuery, но иногда это может быть отключено. Убедитесь, что jQuery подключен на вашем сайте, если код не работает.
Если код не сработал, и вы верно ввели идентификатор нужного блока, то может у вас не подключена библиотека jQuery ? Вот как ее подключить, внесите этот код в файле header.php в любое место, например, перед закрывающем </head>:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-KyZXEAg3QhqLMpG8r+Knujsl5+5hb7xDfZh4HfZf6yM="
crossorigin="anonymous"></script>Итог:
Оставьте оба метода, чтобы обеспечить лучший опыт для всех пользователей. JavaScript добавляет дополнительную гибкость, а CSS обеспечивает скрытие элементов даже без включенного JavaScript.
Как скрыть поиск ?
Как скрыть блок “Поиск” на WordPress в мобильной версии сайта ? Точно так же, как и в случае с блоком Категории. Таким же образом можно скрыть любой мешающий вам блок в мобильной версии сайта. В этом случае мы добавим в условие If еще одно условие проверки (в нашем случае ID у блока с поиском это #search-1):
<script>
jQuery(document).ready(function($) {
if ($(window).width() <= 768) {
$('#categories-1').hide();
}
if ($(window).width() <= 768) {
$('#search-1').hide();
}
});
</script>
и CSS правила:
@media (max-width: 768px) {
aside#categories-1 {
display: none !important;
}
aside#search-1 {
display: none !important;
}
}
Я, Ирина Петрова-Левин, выпускница Московского Технического Университета Связи и Информатики, где получила образование в области информационных технологий. Мой профессиональный путь связан с JavaScript, PHP и Python, а также с глубоким интересом к тому, как современные технологии влияют на повседневную жизнь. Я стараюсь объяснять сложные процессы так, чтобы они становились понятными каждому, без потери точности и сути.
С 2019 года живу в Далласе, что позволяет мне сочетать опыт российской инженерной школы с американским технологическим подходом. В своих материалах я стремлюсь показывать реальные механизмы работы технологий и предметов вокруг нас, делая информацию одновременно доступной, практичной и структурированной.
