Сервисы проверки удобства отображения сайта на мобильных устройствах от Яндекс и Google не совсем адекватны, так как они требуют не присутствия мобильной версии веб-сайта, а наличия адаптивного дизайна. Им нужен адаптивный шаблон, отсюда и растут ноги у того, что допинг-контроль проходят не все ресурсы. Ниже я расскажу, как пройти проверку удобства просмотра при наличии мобильной версии, например, Joomla Mobile, но отсутствии адаптивного шаблона.
Что имеем
На старте имеем сайт, на который установлена и настроена Joomla Mobile и он неплохо отображается на смартфонах и Айфонах, но не имеет адаптивного шаблона. Такое сочетание приводит к тому, что проверка показывает много красных букв
Страница не оптимизирована для мобильных устройств
и это ножкой от рояля бьёт по нежной голове оптимизатора. Почему не помогает Mobile Joomla? Это вопрос к её создателям, по факту с весны 2016 года обычная версия компонента не проходит проверку на адаптивность, точнее ни Яндекс, ни Google её MJ не видят и не учитывают вплоть до версии PRO. Она стоит 50$, поэтому пойдём другим путём.
Что хотим
Желания мои скромны, как помыслы послушницы:
- - Сайт должен проходить проверку на адаптивность с оценкой от 90%,
- - Сайт должен реально корректно отображаться на Айфонах и смартфонах,
- - Никаких финансовых расходов – всё делают руки и голова.
Попытаемся совместить желаемое с действительным и добиться заветного результата проверки:
Отлично! Страница оптимизирована для мобильных устройств.
Правим CSS
Править мы будем только файлы стилей CSS и внесём одну строку, если её ещё нет, в index.php шаблона.
Для начала вставляем или проверяем корректность использования viewport. Для этого открываем index.php и проверяем, есть в области head строка:
<meta name="viewport" content="width=device-width, initial-scale=1">
Если есть живём дальше, если нет, то вставляем её. Мета-тег viewport указывает ширину области просмотра для разных устройств, с его помощью на разных экранах ширина области просмотра соответствует размеру экрана. Тегом задают и начальные параметры масштабирования страниц, но это нам не надо, это от лукавого.
Телодвижение №2 – это избавление от оценки:
Контент шире экрана.
Для этого убираем горизонтальную прокрутку страниц стандартной версии – правим стили в папке CSS рабочего шаблона. Прописываем в стили:
overflow-x: hidden !important;
Делается это в сегменте body, у меня код после изменения выглядит так:
body {overflow-x: hidden !important;}
Всё, теперь горизонтальной прокрутки нет, идём дальше.
Остаётся прописать в стили медиа запросы @media. В них указывается тип носителя и особенности его стиля. Стандартный рабочий вариант – это:
@media screen and (max-width: 700px) { img {max-width: 96% !important; height: auto !important;} iframe, textarea, input, button, submit, video, object, embed {max-width: 99% !important;} table, span, div, ins {max-width: 100% !important;} @media screen and (max-width: 500px) { body, tbody { -moz-hyphens: auto;
Он может видоизменяться, но в 9 из 10 случаев работает на большинстве сайтов.
Вставьте этот код в файл CSS со стилями, и смело проходите проверку на адаптивность сайта.
Три действия помогут избавиться от красноты в сервисах проверки, поэтому позициям в мобильной выдаче ничего не грозит.
Сейчас доделываю адаптивный шаблон, который будет корректно отображаться в разных браузерах без использования расширения Joomla Mobile. По завершению работы поделюсь результатом. ... Доделал адаптивный шаблон, всё корректно отображается, но информация выше нужна, так как у неё другая задача - проходить проверку ПС.