Для связи:+7(921)985-24-18
/ Блог / НАХОДКИ / САЙТ ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ - 12 Марта 2017 - Блог

САЙТ ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ

Добавил swift 27.05.2018 в 18:51

Занимался адаптацией сайта для просмотра на мобильных устройствах разного типа.
Не совсем удовлетворен результатом, но на 80-90% решение устраивает.
Помогли несколько статей:
Статья 1 (Адаптированная верстка сайта)
Статья 2 (Как адаптировать сайт под мобильные устройства?)
Статья 3 (3 способа быстро адаптировать сайт под мобильные устройства)

Сейчас применено такое решение (описываю на будущее, если материалы из статей или сами статьи со временем пропадут):
1) Во-первых, чтобы сайт подстраивался под мобильные устройства, необходимо вставить в шаблон, страницу или файл header.php между полями <head></head> вот это:

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

Я вставил эту строчку в шаблон каждой страницы между  указанными тегами <head></head>

2) В завершении таблицы стилей CSS вставил следующие строчки:
/* Mobile first queries */
/* Larger than mobile */
@media (min-width: 400px) {}
/* Larger than phablet */
@media (min-width: 550px) {}
/* Larger than tablet */
@media (min-width: 750px) {}
/* Larger than desktop */
@media (min-width: 1000px) {}
/* Larger than Desktop HD */
@media (min-width: 1200px) {}

Эти параметры позволят открывать сайт на разных по ширине экрана устройствах:
Desktop HD: 1200px
Desktop:       1000px
Tablet:            750px
Phablet:         550px
Mobile:           400px

Проверить оптимизацию сайта для мобильных устройств можно при помощи сервиса google

0 комментария

Оставить комментарий