Как пользоваться: Симулятор устройств для сайтов
- Введите адрес вашего сайта и нажмите Посмотреть.
- Выберите размер телефона, планшета, ноутбука или компьютера, затем нажмите Повернуть, чтобы перейти к альбомной ориентации.
- Нажмите Сравнить, чтобы увидеть вид на телефоне, планшете и ноутбуке рядом.
- Добавьте свои размеры в разделе Добавить своё устройство. Они сохраняются в этом браузере.
Что показывает симулятор
Он загружает вашу страницу с шириной и высотой выбранного устройства, поэтому адаптивная верстка и CSS-брейкпоинты работают так же, как при этом размере экрана. Это быстрый способ найти сломанную верстку, обрезанный текст и таблицы, которые выходят за границы.
Что он не может показать
Это не настоящее устройство. Симулятор не меняет движок браузера, поэтому размер iPhone здесь всё равно работает в вашем браузере. Функции, которые зависят от user agent или сенсорного оборудования, могут вести себя иначе. Перед запуском проверьте сайт на реальных телефонах или используйте режим эмуляции устройств в браузере для более подробной проверки.
Почему некоторые сайты остаются пустыми
Многие сайты передают заголовок X-Frame-Options или правило frame-ancestors, которые запрещают загружать их внутри другой страницы. Если инструмент обнаруживает такие ограничения, он показывает реальный скриншот в нужном размере. Так вы всё равно можете проверить верстку, но ссылки и прокрутка работать не будут. Для снимков всей страницы используйте инструмент Скриншот мобильного сайта.
Точные ли размеры устройств?
Размеры — это распространённые значения viewport в CSS-пикселях, а не физическое разрешение экрана. В реальных браузерах часть высоты занимают панели инструментов, поэтому относитесь к этим значениям как к примерному ориентиру.
Также ищут как: симулятор iphone онлайн, вид сайта на ipad.
Инструменты, которые хорошо сочетаются с Симулятор устройств для сайтов
- Скриншот сайта — Введите URL и получите скриншот всей страницы, снятый в настоящем браузере Chrome — с шириной для десктопа, планшета или телефона и разрешением до 3× (Retina).
- Разрешение экрана — Размеры экрана и окна браузера в CSS-пикселях, коэффициент плотности пикселей и реальное физическое разрешение — измеряется вашим браузером в реальном времени.
- Тест тачскрина — Коснитесь области ниже, чтобы увидеть каждый палец, который распознаёт экран.
- Тест скорости страницы — Запустите Google Lighthouse для любого URL в мобильном или десктопном режиме.