САЙТ ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ
Занимался адаптацией сайта для просмотра на мобильных устройствах разного типа.
Не совсем удовлетворен результатом, но на 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