Как пройти проверку

Сервисы проверки удобства отображения сайта на мобильных устройствах от Яндекс и Google не совсем адекватны, так как они требуют не присутствия мобильной версии веб-сайта, а наличия адаптивного дизайна. Им нужен адаптивный шаблон, отсюда и растут ноги у того, что допинг-контроль проходят не все ресурсы. Ниже я расскажу, как пройти проверку удобства просмотра при наличии мобильной версии, например, Joomla Mobile, но отсутствии адаптивного шаблона.

Проверка удобства просмотра на мобильных устройствах

Что имеем

На старте имеем сайт, на который установлена и настроена Joomla Mobile и он неплохо отображается на смартфонах и Айфонах, но не имеет адаптивного шаблона. Такое сочетание приводит к тому, что проверка показывает много красных букв

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

и это ножкой от рояля бьёт по нежной голове оптимизатора. Почему не помогает Mobile Joomla? Это вопрос к её создателям, по факту с весны 2016 года обычная версия компонента не проходит проверку на адаптивность, точнее ни Яндекс, ни Google её MJ не видят и не учитывают вплоть до версии PRO. Она стоит 50$, поэтому пойдём другим путём.

Что хотим

Желания мои скромны, как помыслы послушницы:

  1. - Сайт должен проходить проверку на адаптивность с оценкой от 90%,
  2. - Сайт должен реально корректно отображаться на Айфонах и смартфонах,
  3. - Никаких финансовых расходов – всё делают руки и голова.

Попытаемся совместить желаемое с действительным и добиться заветного результата проверки:

Отлично! Страница оптимизирована для мобильных устройств.

Правим 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. По завершению работы поделюсь результатом. ... Доделал адаптивный шаблон, всё корректно отображается, но информация выше нужна, так как у неё другая задача - проходить проверку ПС.