Проверка адаптивности (responsive checker) показывает одну страницу в нескольких ширинах экрана. Онлайн-сервисы хорошо работают на публичных страницах, которые разрешают вставку во фрейм, и не работают на трёх видах страниц: localhost, страницы за логином и сайты с заголовком, запрещающим встраивание. Если рамка пустая, причина почти всегда в последнем, и это можно подтвердить за десять секунд. Для таких страниц нужен инструмент, который работает внутри вашего браузера: режим устройств в Chrome DevTools или расширение для мобильного вида.
Какую проверку выбрать под страницу
| Страница | Онлайн-проверка | Что работает вместо |
|---|---|---|
| Публичная страница, разрешающая фрейм | Да | Любой онлайн-сервис |
| Страница, запрещающая фрейм | Пустая рамка или ошибка | Режим устройств в DevTools, расширение для мобильного вида |
| Тестовый сайт за логином | Обычно экран входа | DevTools или расширение во вкладке, где вы уже вошли |
| localhost | Нет, серверы сервиса его не видят | DevTools или расширение; для настоящего телефона см. тестирование localhost на мобильном |
Почему онлайн-проверка показывает пустую рамку
Большинство онлайн-сервисов загружают страницу в iframe. Сайт может запретить браузеру показывать себя во фрейме заголовком X-Frame-Options или правилом frame-ancestors в Content-Security-Policy. MDN описывает X-Frame-Options: DENY как запрет показа страницы в любом фрейме, а SAMEORIGIN как разрешение только если у всех родительских фреймов тот же origin, что и у страницы. В теге <meta> этот заголовок не действует, работает только HTTP-заголовок. Никакой сервис не может это обойти, потому что запрет применяет браузер, а не сервис.
Многие крупные сайты отправляют один из этих заголовков. Когда мы смотрели 28 октября 2026 года, bbc.com отвечал с X-Frame-Options: SAMEORIGIN, поэтому в чужом фрейме его не показать. Это решение сайта и к вашей вёрстке отношения не имеет.
Проверьте за десять секунд, разрешает ли сайт фрейм
Выполните в терминале и посмотрите на два заголовка:
curl -sI https://example.com | grep -iE "x-frame-options|content-security-policy"Если видите X-Frame-Options: DENY или SAMEORIGIN, либо Content-Security-Policy с frame-ancestors, онлайн-сервисы страницу не покажут. Если ни того ни другого нет, фрейм разрешён. В Chrome можно открыть DevTools, перейти на вкладку Network, выбрать запрос страницы и прочитать заголовки ответа.
Если это ваш сайт, не ослабляйте эти заголовки только ради проверки: они защищают посетителей от кликджекинга. Тестируйте инструментом, которому фрейм не нужен.
Если фрейм заблокирован, берите инструмент внутри браузера
Превью выше тоже онлайн-проверка: оно загружает страницу во фрейм, поэтому у него то же ограничение. Когда сайт запрещает встраивание, онлайн-инструмент мобильного вида так и говорит, вместо пустой рамки, и решение здесь расширение. Расширение для мобильного вида или режим устройств в DevTools меняют саму вкладку, поэтому заголовок значения не имеет, а логины и localhost работают как в любой вкладке. DevTools описаны в руководстве по эмулятору мобильных устройств в Chrome, а выбрать между ними поможет статья расширение-симулятор мобильных устройств или DevTools.
Чего проверка адаптивности оценить не может
Проверка, которая меняет только ширину, равна перетаскиванию края окна браузера. Она не скажет, отдаёт ли сервер телефонам другую страницу, как вёрстка ведёт себя с длинным контентом или при масштабе 200% и как её рисует Safari. Весь метод, от прохода по ширинам до автоматических скриншотов, описан в статье как тестировать адаптивный дизайн. Считайте такую проверку первым взглядом, а не приёмкой.
Частые вопросы
Почему проверка адаптивности показывает пустую страницу для моего сайта?
Чаще всего потому, что сайт отправляет X-Frame-Options или правило CSP frame-ancestors, запрещающее фрейм. Проверьте заголовки ответа, как показано выше. Localhost и страницы за логином не работают по другой причине: серверы сервиса до них не достают.
Можно ли проверить localhost в онлайн-сервисе?
Нет. Онлайн-инструмент не может открыть адрес, который существует только на вашем компьютере. Используйте Chrome DevTools или расширение для мобильного вида во вкладке с локальным сайтом.
Достаточно ли такой проверки, чтобы принять сайт?
Нет. Она показывает вёрстку в нескольких ширинах. Для приёмки нужны ещё стресс-тесты контента и проверка на настоящих устройствах, их описывает руководство по тестированию адаптивности.
Источники: MDN, X-Frame-Options (прочитано 28 октября 2026 года); заголовки ответа bbc.com, запрошенные через curl 28 октября 2026 года.