Чтобы посмотреть сайт как на iPad в Chrome, откройте DevTools, включите панель устройств (Ctrl + Shift + M, на Mac Cmd + Shift + M) и выберите iPad в списке Dimensions или введите размер планшета, например 820 × 1180. Расширение для мобильного просмотра с пресетами планшетов делает то же самое с кнопки на панели. Но прежде чем доверять увиденному, прочитайте раздел про Safari на iPad ниже: настоящие iPad часто загружают десктопную версию сайта.
Почему тестирование на планшетах легко сделать неправильно
Планшеты находятся в неудобной середине адаптивного дизайна. Их ширина в портретной ориентации (примерно от 744 до 1032 CSS-пикселей у актуальных iPad) приходится ровно на самые распространённые брейкпоинты, 768 и 1024 px. Раскладка может переключаться между «телефонной» и «десктопной» при повороте планшета, и именно здесь обычно ломаются «липкие» шапки, боковые меню и многоколоночные сетки.
Есть и вторая ловушка, которая с шириной никак не связана.
Safari на iPad по умолчанию запрашивает десктопную версию
Начиная с iPadOS 13 Safari на iPad по умолчанию запрашивает десктопные версии сайтов. Он отправляет user agent, похожий на Safari для Mac, а не на iPad. Это значит:
- сервер, который определяет мобильные устройства по user agent, примет iPad за настольный компьютер;
- CSS по-прежнему следует реальной ширине области просмотра, так что медиазапросы работают как ожидается;
- ввод остаётся только сенсорным, хотя сайт думает, что общается с Mac.
Поэтому, эмулируя iPad в Chrome с user agent «iPad», вы можете увидеть версию сайта, которую реальные пользователи iPad никогда не получают. Для честной проверки смотрите оба варианта: область просмотра iPad с мобильным/iPad user agent и ту же область просмотра с десктопным user agent. В DevTools user agent можно подменить в More tools > Network conditions; шаги описаны в статье как изменить user agent в Chrome.
Способ 1: режим устройства в DevTools
- Откройте DevTools и включите панель устройств.
- В меню Dimensions выберите модель iPad, если она есть в списке. Если нет, нажмите Edit и включите дополнительные устройства или выберите Responsive и введите размер.
- Нажмите значок поворота, чтобы проверить горизонтальную ориентацию.
- Перезагрузите страницу.
Режим устройства также эмулирует события касания, что помогает при проверке планшетных меню, открывающихся по нажатию. Подробнее в статье про эмулятор мобильных устройств в Chrome.
Способ 2: расширение для мобильного просмотра с пресетами планшетов
Если планшетную вёрстку приходится проверять часто, расширение быстрее. В Mobile View Extension рядом с телефонами есть пресеты планшетов, поддерживаются портретная и горизонтальная ориентация, а если нужного устройства нет в списке, можно ввести своё разрешение. Расширение перезагружает вкладку с подходящим user agent и размером экрана и сохраняет этот вид при переходах. Как и в любом превью внутри браузера, работа идёт мышью, а не касаниями.
Способ 3: Xcode Simulator для настоящего Safari на iPad
На Mac в Xcode Simulator работает настоящая iPadOS с Safari. Он показывает описанное выше поведение с десктопной версией, собственную отрисовку Safari и экранную клавиатуру. Он бесплатный, но тяжёлый и работает только на macOS. См. статью как проверить сайт на iPhone без iPhone: для iPad шаги те же.
Актуальные размеры области просмотра iPad
Это размеры области просмотра в CSS-пикселях в портретной ориентации, полученные делением опубликованных Apple разрешений экрана на плотность пикселей 2.
| Модель iPad | Экран | Физическое разрешение | Область просмотра CSS (портрет) |
|---|---|---|---|
| iPad mini (6-го и 7-го поколения) | 8,3″ | 1488 × 2266 | 744 × 1133 |
| iPad (10-го поколения и A16) | 10,9–11″ | 1640 × 2360 | 820 × 1180 |
| iPad Air 11″ (M2 и новее) | 11″ | 1640 × 2360 | 820 × 1180 |
| iPad Air 13″ (M2 и новее) | 13″ | 2048 × 2732 | 1024 × 1366 |
| iPad Pro 11″ (M4 и новее) | 11″ | 1668 × 2420 | 834 × 1210 |
| iPad Pro 13″ (M4 и новее) | 13″ | 2064 × 2752 | 1032 × 1376 |
Сверяйтесь со страницей технических характеристик Apple для конкретной модели: Apple часто обновляет iPad.
Android-планшеты гораздо разнообразнее. Полезный набор для проверки: 800 × 1280, 600 × 960 (небольшие планшеты на 7–8 дюймов) и широкий горизонтальный размер вроде 1280 × 800.
Что проверять на размере планшета
- Навигацию. Переключается ли меню с «гамбургера» на полную панель на той ширине, где полная панель действительно помещается?
- Сетки. Не превращаются ли трёхколоночные сетки карточек в тесные двухколоночные с одинокими элементами?
- Взаимодействия только по наведению. Выпадающие меню, открывающиеся по наведению, на сенсорном экране не работают. Убедитесь, что они открываются и по нажатию.
- Горизонтальную ориентацию. Поверните и проверьте снова: 1180 px в ширину в горизонтальной ориентации могут включить десктопную раскладку на 10,9-дюймовом экране.
- Изображения и видео. У планшетов экраны высокой плотности, поэтому изображения низкого разрешения выглядят мыльно.
Брейкпоинты, удобные для планшетов, обсуждаются в статье про брейкпоинты для адаптивной вёрстки.
Частые вопросы
Какой размер экрана использовать для проверки на iPad?
Начните с 820 × 1180 (iPad и iPad Air 11″) и 1024 × 1366 (13-дюймовые модели) в обеих ориентациях. Добавьте 744 × 1133, если для вашей аудитории важен iPad mini.
Почему на iPad мой сайт показывает десктопную версию?
Safari на iPad по умолчанию запрашивает десктопные сайты и отправляет user agent, похожий на Mac. Если сайт выбирает версию по user agent, iPad получает десктопную. Адаптивная вёрстка, опирающаяся на ширину в CSS, избавляет от этой проблемы.
Можно ли посмотреть планшетный вид в Chrome без DevTools?
Да. Расширение для мобильного просмотра с пресетами планшетов, например Mobile View Extension, показывает планшетные размеры с кнопки на панели.