Удобство использования Google для мобильных устройств> Содержание шире экрана

Невозможно исправить ошибку Google Mobile Usability > Содержимое шире экрана в Google Search Console. Я попробовал эмулятор мобильного макета Chrome от DevTools, установил ширину 320px, но горизонтальная прокрутка не появилась. Итак, все выглядит хорошо в эмуляторе, но Google вызывает ошибку. Затем я должен добавить в CSS:

@media screen {
  html, body {
    width:      100%; 
    overflow-x: hidden;
  }...

Но никакого эффекта, ошибка все еще сохраняется.

Инструмент Test Live URL не показывает ошибок, все страницы для мобильных устройств.

Есть идеи, как это исправить? Я уверен, что это ошибка Google, но как этого избежать?

Источник

2 ответа

Решение

Я удалил все "position: absolute" из классов, не имеет значения, подходит ли абсолютный элемент на маленьком экране. Но эти классы были отнесены к скрытому контенту, который прекрасно вписывается в самый маленький экран смартфона, также большинство из них не были связаны с каким-либо элементом страницы, потому что элементы были защищены паролем.

Я нашел способ быстрее рендерить страницы, не дожидаясь долгого времени после нажатия "индексация запроса". Сначала создайте новую страницу, используя шаблон сайта и css, текст на странице должен быть уникальным (Lorem Ipsum Generator поможет с этим). Во-вторых, создайте еще один файл Sitemap с одним URL-адресом, указывающим на новый файл, отправьте его, и через 5 минут вы будете сканировать и проиндексировать страницу. Это очень помогает при поиске ошибки в шаблоне или CSS.

Изменить: Поскольку удаление абсолютной позиции нарушило дизайн пользовательского интерфейса, я вернул его обратно с помощью JavaScript.

Источник

Проверьте в реальных устройствах вместо эмулятора. Удалите каждый раздел и проверяйте итеративно, вы поймете, какой из них вызывает горизонтальную прокрутку

Источник
Другие вопросы по тегам