Сайт на разных экранах: iPhone, Samsung, iPad, ноутбук и монитор

Сайт на большом мониторе может выглядеть идеально, а на телефоне — с уехавшим меню, мелким текстом и таблицей, которая вылезает за край экрана. Проверять его на десятке настоящих устройств долго и дорого. Введите адрес ниже — и страница откроется внутри рамок iPhone, Samsung, iPad, ноутбука и монитора в точных размерах их экранов.

Как пользоваться

1. 🌐 Введите адрес сайта и нажмите «Показать». Можно без https:// — он подставится сам. Для примера сразу открыта главная этого сайта.
2. 📱 Выберите устройство: телефоны, планшеты, ноутбуки, мониторы или свой размер в пикселях. Под рамкой подписаны размер экрана и масштаб, в котором рамка показана.
3. 🔄 Поверните телефон или планшет кнопкой «Повернуть» или клавишей R.
4. 🧩 Режим «Сравнение» показывает до шести экранов рядом. По умолчанию — iPhone, Samsung, iPad, MacBook и монитор Full HD: так сразу видно, где вёрстка ломается.
5. 🔗 Кнопка «Ссылка» копирует адрес этой проверки вместе с сайтом и выбранными устройствами — можно отправить дизайнеру или заказчику.

Сайт внутри рамки живой: по нему можно кликать, листать, открывать меню и заполнять формы. Кнопка «На весь экран» убирает всё лишнее и даёт рамкам максимум места.

Почему размеры такие маленькие

У iPhone 17 Pro экран 1206 × 2622 точки, а в инструменте он подписан как 402 × 874. Это не ошибка. Вёрстка сайтов работает не с физическими точками экрана, а с CSS-пикселями: на iPhone один CSS-пиксель — это квадрат 3 × 3 физические точки. Этот множитель называется DPR (device pixel ratio), он подписан рядом с размером, например «3x».

Для адаптивной вёрстки важна именно ширина в CSS-пикселях: по ней срабатывают медиазапросы вроде @media (max-width: 768px). Поэтому почти все современные телефоны укладываются в диапазон 360–440 пикселей в ширину, хотя по характеристикам у них «Full HD» и выше.

Если вместо сайта пустой экран

Чаще всего это не поломка, а защита. Многие сайты запрещают показывать себя внутри чужих страниц, чтобы их нельзя было подложить под обманную кнопку. Делается это заголовком X-Frame-Options: DENY или Content-Security-Policy: frame-ancestors 'self'. Так настроены банки, соцсети, почта, поисковики и многие панели управления.

Обходить это через сервер-посредник я сознательно не стал. Посредник скачивал бы страницы от своего имени, и сайт показывался бы не так, как у настоящего посетителя: с другим IP, без ваших файлов cookie, иногда с капчей.

Если пустым оказался ваш сайт, есть два честных пути:

• 🛠 Режим устройств в браузере. В Chrome и Edge нажмите F12, затем Ctrl + Shift + M (на Mac — ⌘ + ⇧ + M). В Firefox — Ctrl + Shift + M. В Safari — меню «Разработка» → «Войти в режим адаптивного дизайна». Там нет красивых рамок, зато работает с любым сайтом.
• 🏠 Локальная копия. Сайт для разработки на http://localhost инструмент в Chrome показывает: защиту от фреймов обычно включают только на боевом сервере.

Ослаблять защиту на боевом сайте ради проверки не стоит.

Чем рамка отличается от настоящего телефона

Инструмент показывает самое важное — как вёрстка ведёт себя на экране нужной ширины. Но кое-что внутри обычного браузера на компьютере воспроизвести нельзя:

• 🧭 Панели браузера. На телефоне сверху адресная строка, снизу панель Safari или Chrome. Реально видимая высота на 100–200 пикселей меньше, чем экран в таблице. Ширина при этом не меняется.
• 🪪 Название браузера (User-Agent). Сайт, который выбирает мобильную версию по названию браузера, а не по ширине экрана, в рамке покажет версию для компьютера. Современные адаптивные сайты от этого не зависят.
• 👆 Касания и наведение. Мышь умеет «наводить», а палец нет. Меню, которое раскрывается только по наведению, в рамке сработает, а на телефоне — нет.
• 🔤 Шрифты и чёткость. Внутри рамки работают шрифты вашего компьютера, а не iOS или Android. И картинки для экранов с DPR 2–3 браузер подбирает по вашему монитору, а не по телефону.

Поэтому финальную проверку перед запуском сайта всё равно лучше сделать на одном-двух настоящих телефонах. А рамки экономят время на всём остальном: сразу видно, где что съехало.

Что проверить на каждом экране

• ↔️ Нет горизонтальной прокрутки. Самая частая проблема — широкая таблица, картинка или длинная ссылка без переноса. Если страницу можно потянуть вбок, где-то элемент шире экрана.
• 🍔 Меню открывается и закрывается. На телефоне оно обычно прячется в кнопку. Проверьте, что пункты помещаются и до последнего можно долистать.
• 🔠 Текст читается без увеличения. Основной текст на телефоне — от 16 пикселей. Мельче iOS начинает сам увеличивать страницу при вводе в поля.
• 👉 Кнопки и ссылки удобно нажимать. Apple рекомендует зону нажатия не меньше 44 × 44 точки, а стандарт доступности WCAG 2.2 требует хотя бы 24 × 24 пикселя.
• 🖼 Картинки не обрезаны и не растянуты. Особенно обложки и баннеры, у которых на телефоне меняется соотношение сторон.
• 📌 Закреплённая шапка не съедает экран. В горизонтальной ориентации на телефоне высота всего 360–440 пикселей, и шапка на 100 пикселей забирает четверть.
• 🪟 Всплывающие окна закрываются. Крестик не должен уезжать за край экрана — проверьте на самом маленьком размере, 360 пикселей.

Если сайт строится с нуля, удобнее начинать вёрстку с самого узкого экрана и расширять её. Тогда на телефонах всё работает изначально, а не «дожимается» в конце.

Какие размеры самые популярные

Конкретные модели меняются каждый год, а диапазоны остаются:

• 📱 Телефоны: 360–440 пикселей в ширину. 360 — бюджетные и средние Android, 390–402 — большинство iPhone, 412–440 — большие Android и iPhone Pro Max.
• 📟 Планшеты: 744–1032 в ширину в вертикальной ориентации и 1024–1376 — в горизонтальной. Горизонтальный планшет часто получает вёрстку ноутбука.
• 💻 Ноутбуки: 1280–1536. Обратите внимание на 1366 × 768 и 1536 × 864: экран низкий, и первый экран сайта часто оказывается обрезан.
• 🖥 Мониторы: 1920 и шире. Здесь главное, чтобы контент не растягивался на всю ширину: длинные строки текста неудобно читать.

Для своих картинок под соцсети пригодится шпаргалка по размерам картинок, а для иконки сайта на всех устройствах — генератор favicon.

Главные советы

• 📏Смотрите на ширину, а не на модель. Вёрстке важны CSS-пиксели: 360, 390–440, 768–1024, 1280 и шире.
• 🧩Включайте сравнение. Пять экранов рядом за секунду показывают, на каком размере вёрстка ломается.
• ↔️Ищите горизонтальную прокрутку. Если страницу можно потянуть вбок, какой-то элемент шире экрана.
• 🔄Не забывайте про поворот. Горизонтальный телефон — самый низкий экран, там видны проблемы с шапкой и всплывающими окнами.
• 📲Финальная проверка — на живом телефоне. Рамка не покажет панели браузера, касания и системные шрифты.
• 🛡Пустой экран — это защита сайта. Для своего сайта используйте режим устройств в браузере или локальную копию.

Частые вопросы

🟣Как посмотреть, как сайт выглядит на телефоне?

Введите адрес в поле выше и выберите телефон: iPhone 17, Galaxy S25 или другой. Страница откроется в рамке с точной шириной экрана этого телефона. Ещё один способ — режим устройств в браузере: F12 и Ctrl + Shift + M в Chrome.

🟢Почему сайт не открывается в рамке?

Сайт запрещает показ внутри других страниц заголовком X-Frame-Options или frame-ancestors. Так защищаются банки, соцсети и многие сервисы. Обойти это без сервера-посредника нельзя, поэтому для таких сайтов используйте режим устройств в браузере.

🔵Чем это отличается от режима устройств в Chrome?

Результат по ширине экрана тот же. Здесь есть рамки устройств, готовый список популярных моделей, сравнение нескольких экранов рядом и ссылка, которую можно отправить другому человеку. Режим в Chrome зато умеет подменять название браузера и имитировать касания.

🟠Какой размер экрана у iPhone для вёрстки?

У современных iPhone ширина от 375 до 440 CSS-пикселей: 375 у iPhone SE, 390–402 у обычных моделей, 420 у iPhone Air и 430–440 у Pro Max. В горизонтальной ориентации ширина и высота меняются местами.

🔴Сайт выглядит в рамке как на компьютере — почему?

Значит, сайт выбирает мобильную версию по названию браузера, а не по ширине экрана. Внутри рамки браузер остаётся вашим компьютерным, поэтому сайт отдаёт обычную версию. Проверьте его в режиме устройств Chrome или на телефоне.

🟡Сохраняются ли адреса, которые я проверяю?

Нет. Сайт загружается напрямую в вашем браузере, сервер NixLife его не видит. Последние шесть адресов запоминает только ваш браузер, чтобы их можно было открыть одним нажатием, — список очищается кнопкой «очистить».