Просмотр мобильной темы сайта в настольном браузере

Почему это работает

Серверы и CMS часто выбирают тему на основе user-agent — специальной строки, которую браузер отправляет на сервер. Если user-agent указывает на мобильное устройство, сервер (или тема) отдает мобильную версию страницы. Подменив user-agent настольного браузера на мобильный и изменив размеры окна, вы заставляете сайт «думать», что вы на смартфоне.

Важно: изменение user-agent не эмулирует все особенности мобильной платформы (такие как сенсорное управление, геолокация, производительность CPU/GPU). Это быстрый способ проверить верстку и условное подключение мобильной темы, но не заменяет полноценного тестирования на реальных устройствах.

Просмотр мобильной темы в Firefox

Установите расширение User Agent Switcher (если его нет). После установки и перезапуска Firefox перейдите в меню “Tools -> Default User Agent -> iPhone”.

Изменение user-agent в Firefox

Обновите страницу сайта — теперь сервер должен отдать мобильную тему.
Чтобы добавить Android-агент: “Tools -> Default User Agent -> Edit User Agents”. Нажмите “New -> New User Agent” и введите:

Description: Android

User Agent:

Mozilla/5.0 (Linux; U; Android 2.2; en-gb; Nexus One Build/FRF50) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1

Остальные поля можно оставить по умолчанию.

Пример user-agent для iPad (если нужно проверить планшетную версию):

Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10

Добавление user-agent в Firefox

Горячая клавиша Ctrl + Shift + M включает режим адаптивного окна (Responsive Design Mode). В этом режиме можно перетаскивать границы окна или выбирать заранее заданные размеры экранов.

Добавьте нужные размеры экранов в список. Для справки:

iPhone 4: 640 × 960 (ширина × высота: 640 × 960)
iPhone 3GS и ниже: 320 × 480 (320 × 480)
Nexus One (Android): 480 × 800 (480 × 800)

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

Альтернативные способы и другие браузеры

Google Chrome: встроенные Инструменты разработчика (DevTools) имеют панель эмуляции устройств. Нажмите F12, затем значок “Toggle device toolbar” (или Ctrl+Shift+M). Там можно выбрать преднастройки устройств; Chrome автоматически меняет user-agent. Для тонкой подстановки user-agent используйте вкладку Network → More tools → Network conditions и снимите галочку “Select automatically”, затем введите свой user-agent.
Safari (macOS): включите меню Разработка (Develop) в настройках, затем в Develop → User Agent можно выбрать мобильные агенты. Также в Web Inspector есть режим Responsive Design.
Opera: современные версии на базе Chromium предлагают те же инструменты, что и Chrome — DevTools с эмуляцией устройств и возможностью переопределения user-agent.

Важно: встроенная эмуляция изменяет user-agent и размеры экрана, но не симулирует все аппаратные особенности устройства (например, тач-события и датчики). Для полного тестирования используйте реальные устройства или облачные сервисы удалённого тестирования.

Контрольный список для тестирования мобильной темы

Включена ли мобильная тема в настройках CMS или плагина.
Отдаёт ли сервер мобильную тему при подмене user-agent на iPhone/Android.
Корректно ли работает адаптивная верстка на ключевых разрешениях (см. таблицу ниже).
Проверены ли основные пользовательские сценарии: регистрация, покупка, оформление заказа, просмотр каталога.
Нет ли скрытых модулей/плагинов, принудительно подключающих десктопный CSS.
Проверено ли отображение важного контента и кнопок (CTA) без горизонтальной прокрутки.

Таблица ключевых разрешений экранов

iPhone 4: 640 × 960 (ввести 640 × 960 или 320 × 480 для device-pixel-ratio 2)
iPhone 3GS: 320 × 480
Android (Nexus One): 480 × 800
Типичный современный смартфон: 360 × 800
Типичный планшет: 768 × 1024

(Примечание: некоторые устройства имеют device pixel ratio >1, поэтому логические CSS-пиксели и физические пиксели отличаются.)

Критерии приёмки

Мобильная тема корректно активируется при подмене user-agent и выбранном разрешении.
Важные пути (регистрация, корзина, поиск) работают без ошибок и доступны на мобильной версии.
Нет наложений интерфейса, горизонтального скролла или обрезанного контента на основных разрешениях.
Скорость загрузки основных страниц приемлема для мобильных сетей (оценка по Lighthouse или другому инструменту).

Шпаргалка / Чек-лист для быстрых действий

Firefox: установить User Agent Switcher → выбрать iPhone/Android → Ctrl+Shift+M для адаптивного режима.
Chrome/Opera: F12 → Ctrl+Shift+M → выбрать устройство → при необходимости Network conditions → задать свой user-agent.
Safari: включить Develop → Develop → User Agent → выбрать нужный.
Всегда очищайте кэш и куки при смене user-agent (иногда сайт кэширует версию).

Когда этот метод не подходит

Если мобильная тема зависит от JavaScript-детекторов, зависящих от сенсорных событий или специфичных API — простая подмена user-agent может не активировать всё поведение.
Если нужно проверить производительность, сенсорные жесты или особенности камеры/геолокации — потребуются реальные устройства или облачные эмуляторы.

Короткий словарь

User-agent: строка, которую браузер отправляет серверу, чтобы идентифицировать бренд/версию браузера и устройство.
Responsive Design Mode: режим, в котором разработчик изменяет размеры окна для тестирования адаптивной верстки.

Итог

Подмена user-agent и использование режима адаптивности в настольном браузере — быстрый и удобный способ предварительно проверить мобильную тему сайта без смартфона. Он экономит время при разработке и помогает заметить очевидные проблемы в верстке. Однако для окончательной валидации и оценки пользовательского опыта всегда тестируйте на реальных устройствах.

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

Короткая версия для социальных сетей: Хотите проверить мобильную тему без смартфона? Подмените user-agent и используйте режим адаптивности в браузере — быстро и эффективно.