/ Адаптивность / Мобильная версия сайта

Мобильная версия сайта

HIT

По современным меркам, мобильная версия сайта — это стандарт. Есть несколько способов создать адаптивность сайта для различных устройств и размеров экрана.

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

Медиазапросы CSS

@media (max-width: 1440px) { .with-right-sidebar {width: 21%;} }
@media (min-width: 1024px) { .with-right-sidebar {width: 46%;} }
@media (min-width: 800px) { .with-right-sidebar {width: 96%;} }
media-query

Медиазапросы для различных устройств:

/* Mobile Phones Portrait or Landscape */
@media screen and (max-device-width: 640px) {
  .wrapper-2 {max-width: 90%; margin: 0 5%;}
}    
  
/* Mobile Phones Portrait */  
@media screen and (max-device-width: 480px) and (orientation: portrait) {
  .wrapper-2 {max-width: 90%; margin: 0 5%;}
}

/* Mobile Phones Landscape */
@media screen and (max-device-width: 640px) and (orientation: landscape) {
  .wrapper-2 {max-width: 50%; margin: 0 5%;}
}

/* Tablets Portrait or Landscape */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px){
  /* some CSS here */
}

/* Desktops */
@media screen and (min-width: 1024px){
  /* some CSS here */
}
Если прописано max-device-width, то правила будут действовать при максимальной ширине экрана устройства, а в браузере при сужении экрана применяться не будут. max-width — правила будут действовать при сужении экрана браузера.

jquery. Событие: изменение ширины экрана

<script type="text/javascript">
$(window).resize(function(){

var w = $(window).width(); // Получаем ширину окна
if (w <= 800) { // Если ширина окна меньше, либо равна 600

$('#content').removeClass('with-left-sidebar');
$('#sidebar').hide();

} else { $('#sidebar').show();}

});
</script>

Подключение стиля с медиазапросом

Стилям при подключении можно назначить медиазапросы

<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/mobile.css" type="text/css" media="handheld,only screen and (max-device-width:800px)" />

Правильное подключение через funсtions.php

wp_enqueue_style( 'mobile', get_template_directory_uri() . '/mobile.css' , array( ), '1.0' , 'only screen and (max-width:800px)' );

Методология адаптивной верстки

  1. В основных стилях (style.css) прописываем стили для различных разрешений экрана (1440, 1280, 1024, не менее 800px)
  2. Подключаем дополнительный стиль (mobile.css) для устройств с разрешением меньше 800px. Прописываем в нем индивидуальные стили для мобильных устройств
  3. В этом же файле делаем разбивку стилей для портретной и альбомной ориентаций:
    @media screen and (max-device-width: 480px) and (orientation: portrait) { … }
    @media screen and (max-device-width: 800px) and (orientation: landscape) { … }
  4. Некоторые вещи можно лучше реализовать с помощью jquery (Какие?)
  5. Отключать скрипты ненужные для мобильной версии (Читать ниже)

Метатег viewport

Данный метатег избавляет от множества проблем с адаптацией под мобильные устройства. Прописываем в header

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

width=device-width — подгонять ширину под ширину устройства
initial-scale=1.0 — изначальный масштаб 1:1

Viewport адаптирует шаблон под мобильное устройство, облегчает редактирование стиля для мобильной версии (mobile.css): уже не нужно редактировать размер шрифта и многие другие элементы. Но viewport не освобождает от «мобильного» стиля, подгонять надо в любом случае.

Медиазапросы для скриптов

Скриптам медизапросы подобно стилям задать нельзя. Для скриптов надо прописывать условия в самих скриптах

if (window.matchMedia("only screen and (min-width: 480px)").matches) {
скрипт
}

WordPress проверка мобильной версии

У WordPress есть встроенная функция проверки мобильной версии

<?php if( wp_is_mobile() ) {

echo 'тут выполняем действия только для мобильных устройств.';

} ?>

Либо !wp_is_mobile() — не мобильная версия.

Таким же образом можно подключать скрипты и плагины (выделено жирным)

function wptuts_scripts_basic()  
{  
  wp_enqueue_script( 'jquery-viewportchecker', get_template_directory_uri() . '/js/jquery.viewportchecker.min.js' , array( ), '1.0', true ); 
  if( !wp_is_mobile() ) { 
  wp_enqueue_script( 'site-scripts', get_template_directory_uri() . '/js/site-scripts.js' , array( ), '1.0', true );
  wp_enqueue_script( 'smooth-scrollbar', get_template_directory_uri() . '/js/smooth-scrollbar.js' , array( ), '1.0', true );
  }
  wp_enqueue_script( 'parallax', get_template_directory_uri() . '/js/parallax.min.js' , array( ), '1.0', true );
}  
add_action( 'wp_footer', 'wptuts_scripts_basic' );

Увеличение при фокусе формы

В некоторых мобильных браузерах (например Chrome) при фокусе на поле какой-либо формы происходит небольшое увеличение данной формы. При этом иногда происходит искажение других элементов сайта. Происходит это из-за того, что в момент такого фокусе перестаёт действовать свойство медиазапроса orientation: portrait. В таких случаях для элементов которые искажаются таким образом данное свойство необходимо убрать.

Кликабельность телефона

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

<a href="tel:+7 (863) 268-75-68">+7 (863) 268-75-68</a>

При этом в десктопной версии сайта телефон будет выглядеть как ссылка. Можно сделать проверку is_mobile и выводить ссылку на телефон только для мобильных версий. Либо скрыть признаки ссылки свойствами
text-decoration: none; cursor: default;

В некоторых мобильных браузерах переход срабатывает и без ссылки, необходимо только вначале телефона указывать +7

Ссылка с сайта в месседжеры

<a title="Viber" href="viber://add?number=+78888888888"><img src="/wp-content/uploads/2015/11/viber-ico-100.png"></a>
<a title="WhatsApp" href="whatsapp://send?phone=+78888888888"><img src="/wp-content/uploads/2015/11/watsup-logo-80.png" ></a>
<a title="Telegram" href="tg://resolve?domain=NAME"><img src="/wp-content/uploads/2015/11/telegram_logo.png" ></a>

Для ссылки в TELEGRAM необходимо при создании группы создать пользователя и вместо NAME вписать его.

Альтернативные рабочие ссылки, которые проверял лично. Единственно, почему из Chrome не переходит в viber, но с остальных браузеров работает как надо.

<a href="https://telegram.im/@Namegroup" target="_blank" rel="noopener nofollow"><img src="/wp-content/uploads/2019/02/telegram_logo.png"></a>

<a href="https://wa.me/79998887766" target="_blank" rel="noopener nofollow"><img src="/wp-content/uploads/2019/02/Watsupp-2_100x100.png"></a>

<?php if(!wp_is_mobile()): ?>
	<a class="viber" href="viber://chat?number=79998887766" target="_blank" rel="noopener nofollow"><img src="/wp-content/uploads/2019/02/viber-ico-100.png"></a>
<?php else: ?>
	<a class="viber" href="viber://add?number=79998887766" target="_blank" rel="noopener nofollow"><img src="/wp-content/uploads/2019/02/viber-ico-100.png"></a>
<?php endif; ?>

<a class="skype" href="https://join.skype.com/invite/fDSJ1b5WLQqp" target="_blank" rel="noopener nofollow"><i class="fab fa-skype"></i></a>

Для того чтобы работала ссылка на Viber с компьютера на него должен быть установлен Viber для ПК.

Иконка сайта

В мобильных браузерах есть функция Добавить на главный экран. Это по сути прямая ссылка на сайт. Но иконка должна быть необходимого размера, главное чтобы она была не меньше требуемого размера. Современные версии WordPress создают подобною иконку при формировании фавикона. Главное делать исходное изображение как минимум 128х128px.

Инструменты разработчика Google

В последнее время немного изменил подход к адаптивности сайтов. Ранее адаптировал для 3-х размеров: десктоп, планшет, моб.телефон. Теперь стараюсь подгонять версии сайта под различные размеры экранов режима Responsive представленные в интерфейсе инструментов разработчика Google. Он предлагает варианты разрешений экранов наиболее часто встречающихся устройств:
4K — 2560px
Laptop L — 1440px
Laptop — 1024px
Tablet — 768px
Mobile L — 425px
Mobile M — 375px
Mobile S — 320px

Заметил такое явление: если название таблицы стилей задать не коротким (даже например landing.css), то при редактировании в Google DevTools название стиля отображается в виде <style>…</style> и его нельзя редактировать.
Все таки искажение редактирование происходило из-за автоматической подмены Google DevTools цветов с HEX на RGB. отключается это так: меню DevTools > Settings > Preferences, тут ищем Color format и выбираем HEX. После этого нужно перезагрузить страницу и DevTools.
На самом деле все что происходило со стилями (нельзя было править, написаны курсивом, нет прямой ссылке к стилю), из-за того что они не грузились в панели Sourse. А это происходило из-за того что именно в этом файле CSS были вот такие стили с пустым изображением: #ourworks-block {background-image: url();} Таких стилей быть не должно!

Иконки и небольшие изображения в моб. версии

Растровые иконки и небольшие изображения лучше делать с двойным запасом для моб. версии. т.к. на телефоне мы смотрим ближе и если делать качество в обрез, то в моб. версии изображение будет недостаточного качества.

Популярные разрешения экранов

  • 2560×1440
  • 1920×1080
  • 1600×900
  • 1536×864
  • 1440×900
  • 1366×768
  • 1280×1024
  • 1280×800
  • 1280×720
  • 1024×768
  • 800×600
  • 640×960
  • 480×800
  • 412×892
  • 375×667
  • 360×640
  • 360×760
  • 360×720
  • 320×480

Breakpoint block-library

Переход к мобильной версии стилей стандартной блочной системы WordPress происходит на ширине 600px. Хуком это изменить нельзя т.к. этот параметр прописан в стилях.

Клики в мобильной версии

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

с

$(selector).click(function() {
   // ...
});

на

$(selector).bind("click touchstart", function() {
   // ...
});

Поделиться в соц. сетях:

  • Похожие записи
  • Комментарии
  • Вложения
Мобильное меню типа mmenu

Мобильное меню типа mmenu

Адаптируем меню под мобильную версию сайта. При этом необходимо учитывать особенности небольших экранов и конфигурировать под них структуру и стили меню. Функционал mmenu.js Подключаем стили и скрипты: <link rel="stylesheet" href="http://opttour.ru/wp-content/themes/tester/jquery.mmenu.css" Читать далее »

/
Меню для мобильной версии

Меню для мобильной версии

Делаем простую адаптацию меню под мобильную версию, превращая в иконку, при нажатии на которую меню раскрывается. Трансформируем меню в иконку Стандартный код вывода меню <nav id="topmenu" role="navigation"> <?php wp_nav_menu( array( Читать далее »

/
Отделяем планшет от телефона

Отделяем планшет от телефона

Как известно функция wordpress wp_is_mobile() определяет мобильные устройства без разбора: телефон или планшет данная функция не распознает. Более точную идентификацию устройства можно делать с помощью плагина WP Mobile Detect. С Читать далее »

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

Пока нет комментариев. Будь первым!

Мобильная версия сайта Мобильная версия сайта Мобильная версия сайта Мобильная версия сайта Мобильная версия сайта Мобильная версия сайта
Родительские и дочерние страницы
Рекомендации для васРодительские и дочерние страницыOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.