Посмотреть мобильную версию сайта на компьютере можно четырьмя способами: сузить окно браузера, включить режим устройства в Chrome DevTools, установить расширение для мобильного просмотра или открыть страницу в эмуляторе телефона. Первый способ быстрый, но часто показывает не то. Остальные три запрашивают у сайта настоящую мобильную вёрстку, а обычно нужна именно она.
Какой способ подойдёт, зависит от цели. Дизайнеру, который проверяет отступы, нужно одно, маркетологу, который хочет увидеть сайт глазами клиентов с iPhone, другое, а разработчику, который ищет баг, проявляющийся только на Android, третье.
Почему узкое окно браузера — это не мобильная версия
Если потянуть за край окна, область просмотра станет уже, сработают медиазапросы CSS, и адаптивная вёрстка перестроится. Эта часть работает. Не меняется всё остальное, что сайт знает о вашем устройстве.
Телефон отправляет мобильную строку user agent и client hints вроде Sec-CH-UA-Mobile: ?1. Он сообщает JavaScript маленький размер экрана, высокую плотность пикселей и поддержку касаний. Некоторые сайты по этим сигналам отдают другую страницу, отдельный поддомен m., облегчённый набор изображений или другое меню. Узкое окно на компьютере не отправляет ничего из этого, и в итоге можно смотреть на сжатую десктопную страницу.
Есть и практическое ограничение: десктопный Chrome обычно не даёт сузить окно сильно меньше 500 пикселей, а ширина области просмотра у многих телефонов от 360 до 440 CSS-пикселей.
Способ 1: режим устройства в Chrome DevTools
В Chrome есть встроенный эмулятор телефона. Откройте DevTools клавишей F12 (или Cmd + Option + I на Mac), затем нажмите Cmd + Shift + M на Mac или Ctrl + Shift + M на Windows, чтобы включить панель устройств. Выберите устройство в списке Dimensions и перезагрузите страницу.
Режим устройства меняет область просмотра, плотность пикселей и user agent и умеет переключаться на события касания. Ещё он замедляет сеть и CPU, что помогает при проверке скорости. Google называет его «приближением первого порядка» к телефону, потому что процессор и браузер вашего компьютера остаются десктопными.
Минус в накладных расходах. DevTools занимает треть экрана, пресеты общие, и для каждой вкладки всё приходится настраивать заново. Весь процесс описан в статье про эмулятор мобильных устройств в Chrome.
Способ 2: расширение для мобильного просмотра
Расширение для мобильного просмотра делает ту же основную работу с кнопки на панели инструментов, без открытия DevTools. Например, Mobile View Extension для Chrome перезагружает текущую вкладку в рамке телефона или планшета с user agent, размерами экрана и плотностью пикселей конкретного устройства. Вы выбираете пресет Apple или Android по названию, переключаете портретную и горизонтальную ориентацию и сохраняете PNG-скриншот вида в рамке.
Это самый быстрый вариант, если вы часто проверяете страницы, смотрите сайт клиента или хотите видеть страницу «как на телефоне», продолжая сёрфить. Превью не выключается при переходах и работает на localhost.
Есть ограничения, о которых стоит знать. Превью работает во фрейме внутри десктопного Chrome, поэтому события касания не генерируются и вы по-прежнему работаете мышью. Медиазапросы hover и pointer эмулируются не полностью. Для жестов или производительности на реальном железе используйте настоящий телефон. Плюсы и минусы обоих подходов сравниваются в статье расширение-симулятор или DevTools.
Способ 3: эмулятор или симулятор телефона
Когда нужен настоящий мобильный браузер, а не десктопный Chrome, который им притворяется, используйте эмулятор:
- Xcode Simulator (только macOS) запускает настоящий Safari для iOS. Это самое близкое к iPhone, что можно получить без iPhone. См. как проверить сайт на iPhone.
- Эмулятор Android Studio запускает Android с Chrome на Windows, macOS или Linux. См. как проверить сайт на Android.
Оба бесплатные, оба требуют тяжёлой загрузки и запускаются несколько минут. Это правильный инструмент для багов конкретного движка, например вёрстки, которая ломается только в Safari.
Способ 4: открыть мобильный сайт напрямую
Некоторые старые сайты до сих пор держат отдельную мобильную версию по адресу вроде m.example.com. Если ввести такой адрес в десктопном браузере, мобильные страницы часто открываются напрямую. Современные сайты так почти не работают, а многие перенаправляют десктопных посетителей обратно на основной домен, так что это скорее лазейка для отдельных сайтов, чем способ.
Какой способ выбрать
| Цель | Лучший способ | Почему |
|---|---|---|
| Быстро посмотреть, как страница выглядит на телефоне | Расширение для мобильного просмотра | Один клик, настоящий мобильный user agent, не выключается при переходах |
| Отладить CSS или JavaScript мобильной вёрстки | Режим устройства в DevTools | Панели Elements, Console и Network рядом с превью |
| Проверить баг, который есть только в Safari | Xcode Simulator или реальный iPhone | Баги WebKit видны только в WebKit |
| Измерить скорость на мобильных | Замедление в DevTools или проверка скорости сайта на мобильных | Десктопное железо скрывает медленные скрипты |
| Проверить области касания и жесты | Реальный телефон | Клики мышью не воспроизводят пальцы |
На что смотреть, когда мобильная версия открыта
Открыть мобильный вид — простая часть. Полезная часть — короткий чек-лист:
- Текст читается без увеличения, основной текст не меньше 16 px.
- Ничего не прокручивается вбок. Горизонтальная полоса прокрутки обычно означает элемент фиксированной ширины или широкую таблицу.
- Меню открывается, закрывается и удобно для большого пальца.
- Кнопки и ссылки разнесены достаточно, чтобы по ним попадать.
- Формы вызывают нужную клавиатуру и не перекрываются «липкими» панелями.
- Изображения чёткие на экранах высокой плотности, но не весят слишком много.
Более полный список перед запуском — в чек-листе тестирования мобильной версии сайта.
Частые вопросы
Можно ли открыть мобильную версию сайта в Chrome без расширения?
Да. Откройте DevTools и включите панель устройств сочетанием Ctrl + Shift + M (Cmd + Shift + M на Mac). Расширение избавляет от этих шагов и запоминает настройку для вкладки.
Покажет ли мобильную версию уменьшение масштаба или сужение окна?
Сужение окна показывает, как адаптивная вёрстка перестраивается на этой ширине. Мобильный user agent при этом не отправляется, поэтому сайты, которые определяют устройство, всё равно отдадут десктопную версию.
Мобильный вид на компьютере — это точно то, что показывает телефон?
Близко, но не одно и то же. Десктопные инструменты меняют область просмотра и сигналы, которые читает сайт. Движок отрисовки, процессор и сенсорный ввод они не меняют. Для финальной проверки откройте страницу на настоящем телефоне.