[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"page:\u002Fblog\u002Fsajt-ne-optimizirovan-dlya-mobilnyh-ustrojstv":3,"crumbs:\u002Fblog\u002Fsajt-ne-optimizirovan-dlya-mobilnyh-ustrojstv":9},{"path":4,"url":5,"title":6,"description":7,"h1":6,"html":8},"\u002Fblog\u002Fsajt-ne-optimizirovan-dlya-mobilnyh-ustrojstv\u002F","https:\u002F\u002Fseopeak.ru\u002Fblog\u002Fsajt-ne-optimizirovan-dlya-mobilnyh-ustrojstv\u002F","Сайт не оптимизирован для мобильных устройств: что делать","Чаще всего страница шире экрана телефона: один элемент отображается со сбоем, появляется горизонтальная прокрутка и плывёт вся вёрстка. Как найти этот блок и поправить.","\u003Cp>Пометка «сайт не оптимизирован для мобильных устройств» ставится, когда страницу на телефоне нельзя нормально читать. Чаще всего причина одна: страница шире экрана. Появляется горизонтальная прокрутка, человек двигает сайт вбок, а блоки съезжают друг относительно друга. Так вёрстка и «плывёт».\u003C\u002Fp>\n\u003Cp>Ширина страницы равна самому широкому элементу. Достаточно одного блока, который отобразился со сбоем и вылез за край, — и тянется уже весь документ. Колонки, которые на компьютере стояли ровно, на телефоне уезжают за экран. Сбой бывает не на всех страницах: широкая таблица в одной статье, карта, слайдер или баннер в одном шаблоне. На соседних адресах без этого блока всё может выглядеть нормально.\u003C\u002Fp>\n\n\u003Ch2>Какие элементы ломают ширину\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>Картинка, видео или встроенный ролик с шириной в пикселях и без ограничения по экрану.\u003C\u002Fli>\n\u003Cli>Таблица, которая не умещается в экран и тянет за собой страницу.\u003C\u002Fli>\n\u003Cli>Строка кнопок, меню или логотипов, которая не переносится на новую строку.\u003C\u002Fli>\n\u003Cli>Слайдер, карта, виджет чата или рекламный блок с минимальной шириной больше экрана телефона.\u003C\u002Fli>\n\u003Cli>Длинный адрес, артикул или слово без переноса: строка не ломается и раздвигает колонку.\u003C\u002Fli>\n\u003Cli>Блок со сдвигом в сторону или с отрицательным отступом. На компьютере он прячется у края, на телефоне торчит и включает прокрутку.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Отдельно проверьте метатег viewport. Если в коде страницы нет \u003Ccode>width=device-width\u003C\u002Fcode>, телефон рисует сайт как узкое окно компьютера. Текст мелкий, а вёрстка тоже кажется «не мобильной», даже когда отдельные блоки не вылезают.\u003C\u002Fp>\n\n\u003Ch2>Как проверить\u003C\u002Fh2>\n\u003Col>\n\u003Cli>Откройте страницу на телефоне или в режиме устройства в браузере, ширина около 360–390 пикселей. Не сужайте окно «примерно»: ошибка часто видна только на настоящей телефонной ширине.\u003C\u002Fli>\n\u003Cli>Проведите вбок. Если страница едет, оптимизация уже сломана, даже если текст в целом читается.\u003C\u002Fli>\n\u003Cli>Найдите блок, который шире окна. Это и есть элемент со сбоем. В инструментах разработчика у него ширина больше, чем у экрана, а у соседей из-за него появляется общая прокрутка.\u003C\u002Fli>\n\u003Cli>Проверьте шаблон, а не одну страницу. Тот же выступ повторится везде, где стоит этот блок: шапка, подвал, галерея, форма.\u003C\u002Fli>\n\u003Cli>Откройте исходный код и убедитесь, что в head есть viewport с width=device-width и initial-scale=1.\u003C\u002Fli>\n\u003Cli>В Вебмастере и в отчёте об удобстве страниц на мобильных посмотрите, какие адреса уже помечены. После правки шаблона на перепроверку отправляют эти адреса, а не весь сайт наугад.\u003C\u002Fli>\n\u003C\u002Fol>\n\n\u003Ch2>Что сделать\u003C\u002Fh2>\n\u003Col>\n\u003Cli>Картинкам, видео и встроенным кадрам задайте максимальную ширину 100% и автоматическую высоту. Файл сжимается под экран и не раздвигает страницу.\u003C\u002Fli>\n\u003Cli>Таблицу оберните так, чтобы вбок ехала только она. Вся страница при этом остаётся по ширине экрана.\u003C\u002Fli>\n\u003Cli>Фиксированные ширины больше телефона замените на 100% или на ограничение «не шире экрана». Ряд кнопок и меню на узкой ширине переносите или складывайте.\u003C\u002Fli>\n\u003Cli>Длинным строкам разрешите перенос. Адрес и артикул не должны растягивать колонку.\u003C\u002Fli>\n\u003Cli>Слайдер, карту и виджет ограничьте шириной контейнера. Если блок сам задаёт себе минимальную ширину в 500–600 пикселей, на телефоне он и есть источник прокрутки.\u003C\u002Fli>\n\u003Cli>Не закрывайте симптом скрытием прокрутки у всей страницы. Горизонтальный скролл пропадёт, а блок останется обрезанным, и вёрстка по-прежнему будет съезжать. Сначала уберите элемент, который шире экрана.\u003C\u002Fli>\n\u003Cli>Поправьте общий шаблон и заново пройдите главную, раздел каталога и страницу, где сбой был виден. На каждой не должно быть движения вбок.\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>Когда вылезающий блок убран и на телефонной ширине страница стоит на месте, пометку снимают после переобхода. Робот должен заново открыть уже исправленные адреса.\u003C\u002Fp>\n",[10,13],{"path":11,"label":12},"\u002Fblog","Блог",{"path":14,"label":6},"\u002Fblog\u002Fsajt-ne-optimizirovan-dlya-mobilnyh-ustrojstv"]