Что это
Iframe — это способ встраивания содержимого одной веб-страницы внутрь другой — именно это делает возможным разместить видео YouTube, карту Google или виджет третьей стороны прямо на своей странице, не создавая эту функциональность самостоятельно. Большинство кодов встраивания, которые вы копируете и вставляете из этих сервисов, уже имеют заданные фиксированную ширину и высоту в пикселях, рассчитанные на типичный настольный экран.
Эта проверка смотрит, настроены ли встроенные iframe на странице изменять размер вместе с экраном («адаптивно»), или они остаются при этом исходном фиксированном размере независимо от фактической ширины экрана посетителя.
Почему это важно
Карта или видео, встроенные с фиксированным размером 560×315 пикселей, например, прекрасно работают на настольном экране, но могут легко быть шире, чем весь экран телефона, вызывая тот же вид горизонтальной прокрутки или полностью визуально обрезаясь. Это распространённая, легко упускаемая проблема именно потому, что код встраивания обычно уже написан платформой (YouTube, Google Maps) точно так, как вставлен, без явного указания на то, что требуется дополнительная настройка для мобильного использования.
Сломанная вставка также непропорционально заметна по сравнению с небольшой текстовой проблемой — карта, обрезанная пополам, или видеоплеер, выходящий за пределы экрана, немедленно, визуально очевидны для любого посетителя, который прокручивает до этой части страницы на своём телефоне.
Как это исправить
- Определите каждый встроенный iframe на вашем сайте — обычно видео, карты или виджеты третьих сторон — и проверьте, как они отображаются на реальном телефоне.
- Оберните iframe в контейнер, стилизованный для контроля его ширины в процентах, с самим iframe, установленным заполнять этот контейнер (
width: 100%), а не использовать его исходную фиксированную ширину в пикселях. - Особенно для встраиваний YouTube распространённый подход — обёртка с фиксированным соотношением сторон (например, 16:9), которая пропорционально масштабирует видео при любой ширине экрана — доступно много бесплатных фрагментов кода именно для этого паттерна.
- Если вы используете конструктор сайтов, проверьте, есть ли у него встроенный блок «встраивание» или «видео» вместо сырого кода iframe — они обычно уже адаптивны по умолчанию.
- Перепроверьте вставку на телефоне после этого, чтобы убедиться, что она правильно изменяет размер, а не выходит за пределы.