Самый точный способ проверить сайт на iPhone, не имея его, — симулятор iOS, который входит в Xcode на Mac. Он запускает настоящий Safari для iOS, поэтому показывает баги отрисовки Safari, экранную клавиатуру и интерфейс браузера. На Windows и Linux официального симулятора iOS нет: остаются WebKit через Playwright, платный облачный сервис с реальными устройствами или мобильный вид в Chrome для проверки вёрстки.
Ниже о том, как работает каждый вариант и что он ловит.
Почему для проверки на iPhone нужен Safari, а не Chrome
Все браузеры на iPhone, включая Chrome и Firefox, исторически обязаны были использовать движок WebKit от Apple. Сейчас Apple разрешает другие движки в некоторых регионах, но почти все пользователи iPhone по-прежнему видят WebKit. У WebKit своё поведение в таких вещах, как 100vh и сворачивающаяся адресная строка, position: fixed при открытой экранной клавиатуре, элементы форм, выбор даты и некоторые новые возможности CSS.
Поэтому страница может идеально выглядеть в эмуляции iPhone в Chrome и всё равно ломаться на настоящем iPhone. Chrome может скопировать размер экрана и user agent iPhone, но рисует страницу своим движком.
Вариант 1: Xcode Simulator на Mac (бесплатно, ближе всего к реальности)
- Установите Xcode из Mac App Store. Загрузка большая.
- Откройте Xcode, перейдите в Settings > Components (в старых версиях Platforms) и установите среду iOS, если её нет.
- Откройте симулятор через Xcode > Open Developer Tool > Simulator.
- Выберите устройство через File > Open Simulator, откройте Safari в симулируемом телефоне и введите адрес.
Симулятор использует сеть Mac, поэтому http://localhost:3000 работает в нём без дополнительной настройки. Устройство можно поворачивать, менять размер текста в симулируемом приложении «Настройки» и проверять тёмную тему.
Инспектирование страницы через веб-инспектор Safari
Чтобы отладить то, что видите:
- На Mac откройте Safari, перейдите в Настройки > Дополнения и включите Показывать функции для веб-разработчиков.
- В меню Safari Разработка выберите симулятор, а затем открытую страницу.
Вы получаете полноценный веб-инспектор (элементы, консоль, сеть) для страницы, открытой в Safari на iOS. В том же меню появится и настоящий iPhone, подключённый кабелем, если включить на телефоне Веб-инспектор в разделе Настройки > Приложения > Safari > Дополнения (в старых версиях iOS Настройки > Safari > Дополнения).
Вариант 2: WebKit через Playwright (Mac, Windows, Linux)
Playwright — библиотека с открытым кодом для автоматизации браузеров, которая поставляет сборку WebKit для всех трёх десктопных систем. В ней есть описания устройств для моделей iPhone, задающие область просмотра, плотность пикселей, user agent и поддержку касаний.
Это не Safari для iOS. Это движок WebKit на десктопной ОС, без интерфейса браузера iOS. Тем не менее он ловит заметную часть различий в отрисовке WebKit и поддаётся автоматизации, так что можно делать скриншоты всех ключевых страниц в размере iPhone прямо в CI. Для разработчиков на Windows это самый дешёвый способ вообще увидеть WebKit.
Вариант 3: облачные сервисы с реальными устройствами
Сервисы вроде BrowserStack, LambdaTest и Sauce Labs сдают доступ к реальным iPhone в дата-центре и транслируют экран в ваш браузер. Вы получаете настоящее железо, настоящий Safari и много версий iOS. Они платные, обычно с ограниченным пробным периодом, а удалённый экран немного запаздывает.
Используйте их для финальной проверки важных сценариев (регистрация, оформление заказа), когда нет ни Mac, ни iPhone, или когда нужна старая версия iOS.
Вариант 4: быстрый вид в размере iPhone в Chrome
Для чисто вёрсточных вопросов (помещается ли меню на 390 px, хорошо ли обрезается главная картинка) хватит вида в размере iPhone в Chrome, и занимает это секунды:
- режим устройства в Chrome DevTools с пресетом iPhone, описанный в статье про эмулятор мобильных устройств в Chrome;
- расширение для мобильного просмотра, например Mobile View Extension, которое перезагружает вкладку в рамке iPhone с user agent и размером экрана iPhone.
Считайте это первым проходом. Всё, что выглядит странно, а также всё, что связано с формами, прокруткой или фиксированными элементами, стоит перепроверить вариантом 1, 2 или 3.
Какой вариант что ловит
| Проблема | Мобильный вид в Chrome | Playwright WebKit | Xcode Simulator | Облачное устройство |
|---|---|---|---|---|
| Вёрстка на ширине iPhone | Да | Да | Да | Да |
| Сервер отдаёт другую мобильную страницу | Да (user agent) | Да | Да | Да |
| Различия CSS и JavaScript в WebKit | Нет | В основном | Да | Да |
Адресная строка и поведение 100vh |
Нет | Нет | Да | Да |
| Экранная клавиатура закрывает поля | Нет | Нет | Да | Да |
| Реальная производительность и память | Нет | Нет | Нет | Да |
Практический порядок проверки на iPhone
- Проверьте вёрстку на 375 px и 393–402 px в мобильном виде Chrome.
- Откройте ключевые страницы в Xcode Simulator (или в Playwright WebKit на Windows).
- Заполните каждое поле форм и следите за клавиатурой и «липкими» элементами.
- Прокрутите длинные страницы и посмотрите, как фиксированные шапки взаимодействуют с адресной строкой.
- Перед запуском хотя бы раз пройдите самый важный сценарий на реальном iPhone или облачном устройстве.
Актуальные размеры области просмотра iPhone собраны в таблице разрешений экранов iPhone. Про другие браузеры ваших посетителей читайте в чек-листе кроссбраузерного тестирования.
Частые вопросы
Можно ли проверить сайт в Safari на iPhone с Windows?
Через официальный симулятор нельзя: Simulator от Apple работает только на macOS. На Windows используйте WebKit через Playwright для проверок на уровне движка или облачный сервис с реальными устройствами для настоящего Safari.
Xcode Simulator — это то же самое, что настоящий iPhone?
Он запускает настоящие iOS и Safari, так что отрисовка совпадает очень близко. Но работает он на процессоре вашего Mac, поэтому производительность, ограничения памяти и некоторые аппаратные функции отличаются от реального телефона.
Почему сайт работает в эмуляции iPhone в Chrome, но ломается на iPhone?
Эмуляция Chrome копирует размер и user agent iPhone, но рисует страницу движком Chrome. Баги, специфичные для движка WebKit в Safari, проявляются только в Safari.