При проверке удобства просмотра сайта на мобильных устройствах часто возникает ошибка: Контент шире экрана! Из-за чего это происходит и как это исправить?
Очевидно, что ошибка связанна с тем, что на странице есть элемент, который выходит за область просмотра viewport.
Например, в инструменте от google-mobile-friendly по умолчанию используется ширина в 320 пикселей.
Рекомендация №1: использовать «резиновые» элементы
Сделать это можно, указав css свойство width:100% и/или max-width:100%
Это наиболее простое и очевидное решение, например:
Примечание :использование значения auto не даёт результата, т.к. оно задаёт автоматическое определение размеров исходного элемента и никак не влияет на его адаптацию.
Рекомендация №2: используйте обёртку для элементов с margin и padding
Следующий нюанс более сложный и менее очевидный. Он связан с особенностями интерпретации CSS-свойств margin и padding в браузерах. По сути, их значения добавляются к исходному размеру элемента.
ТËТЯ ЗИНА СПАСАЕТ ДЕН19К | АНИМАЦИЯ ЧИКЕН ГАН — ANIMATION CHICKEN GUN
Например, у нас есть элемент content-outer :
Для него задано:
В таком случае мы получим ширину: 100% + 10px + 10px (отступы в 10px слева и справа).
Одним из вариантов решения проблемы является использование CSS-свойства box-sizing со значением border-box , которое заставляет браузер учитывать ограничение, заданное родительским элементом. В нашем случае родительским элементом является тег body .
Однако такое решение нельзя назвать кросбраузерным. Поэтому обычно используетсявнешняя обёртка, которая будет задавать размер элемента, а отступы указываются для внутреннего элемента.
В данном случае CSS-свойства распределяются так:
Примечание: рекомендую обнулять отступы у тега body
Источник: mks-seo.ru
Страница не оптимизирована для мобильных устройств или контент шире экрана
Добрый день, дорогие читатели блога! Сегодня я расскажу Вам про трудности возникших у многих вебмастеров. Наверняка многие из Вас сталкивались с сообщением в выдаче Google, в котором говорилось о том, что страница сайта не оптимизирована для мобильных устройств. Переходя по ссылке, Вы проверяете совместимость с мобильными девайсами и Вам выдается 2 ошибки отображения: контент шире экрана и интерактивные элементы расположены слишком быстро. Сегодня я расскажу Вам, как решить эту проблему.
Оптимизация отдельной страницы под совместимость с мобильными устройствами
Проблема контент шире экрана появляется у многих сайтов. Что самое сложное, такая проблема всплывает даже в том случае, если у Вас адаптивный шаблон сайта или сделана отдельная мобильная версия. Именно созданием отдельной мобильной версией я пытался решить данный вопрос, однако все оказалось гораздо проще. Немного о других попытках решения данной проблемы:
Давай сделаем кнопку ПОКАЗАТЬ ЕЩЕ без косяков! Управляй контентом на странице.
- я устанавливал плагин сжатия изображений и медиафайлов для различных устройств
- создавал отдельную мобильную версию сайта
- изменил настройки кеширования для сайта
- сжимал CSS сайта и изменял настройки отображения
Если Вы читали о решение данной проблемы в интернете, то можно найти множество способов решений, которые не принесут реального результата. Для решения проблемы достаточно решить всего одно несоответствие. Нет необходимости в правке CSS кода и изменения PHP кода сайта.
Мой способ подойдет не только для сайта на wordpress, но и для других админок где открыта настройка размеров медиафайлов. Мне кажется, большинство ошибок происходит из-за того, что Google сообщает о неправильном расположении интерактивных элементов сайта. Вебмастера сосредотачиваются именно на решение этого вопроса, теряя на нее много времени, однако данная проблемы второстепенна – она вытекает именно из-за более широкого контента.
Контент шире экрана – вот первоначальная причина того, что к странице сайта появляется претензия у Google. Если сайт оптимизирован под мобильные устройства, то претензии появляются именно к конкретным страницам, а не всему вебресурсу. Для того, чтобы устранить данную причину, необходимо проверит все отображаемые элементы на странице. Как правило, Google имеет претензии к изображениям, которые шире 600 пикселей (к сожалению, я не нашел точных параметров в мануале Google). Первое, что Вам необходимо сделать – это изменить размер медиафайлов до 500 пикселей (такой размер я использую для своих сайтов).
Вторая причина возникновения проблемы контент шире экрана – ширина графических элементов превышает установленные гуглом размеры для мобильных устройств. Это могут быть слайдеры, шапка сайта или фоновые изображения. Именно проблема широкой шапки (несмотря на адаптивный дизайн) была причиной неоптимизации под мобильные устройства по параметрам Google на одном из моих сайтов. После замены шапки, сайт стал полностью оптимизированным для мобильных устройств.
Как оптимизировать сайт для мобильных устройств в Google
Для того, чтобы оптимизировать сайт под мобильные устройства и устранить проблему широкого контента необходимо провести действия по следующему алгоритму:
- Выделим на сайте все возможные медиафайлы, начиная от тега Head и заканчивая Footer.
- Запишем размеры каждого медиафайлы
- Сделаем размер каждого медиафайла меньше 600 пикселей
После проведения этих нехитрых действий можно проверять страницу в инструменте оптимизации под мобильные устройства. Как можно увидеть, изменение интерактивных элементов может потребоваться лишь в редких случаях. Надеюсь, моя статья была полезна для Вас, и Вы смогли решить проблему контент шире экрана. Если в ходе решения у Вас появились дополнительные проблемы, обязательно пишите о них в комментариях, постараемся разобраться.
Источник: bloogit.ru
Контент шире экрана проблема google как решить?
Добрый день. Думаю уже надоели вопросы про гугл и ошибку мобильной версии. Ребята это мой первый проект, я чайник пока еще в кодах не разбираюсь, не судите строго))) Делаю «проверка страницы на сайте» все оптимизированно, но гугл всякий раз плюется((( Посмотрите плиз в чем проблема?
https://xn--80aaadrsbqfc0agfedvwq7d.xn--p1ai/
человек вроде бы указал где проблема, но как ее исправить я не знаю и в этом ли проблема?
- Вопрос задан более двух лет назад
- 327 просмотров
1 комментарий
Средний 1 комментарий
Источник: qna.habr.com