Проверка адаптивной вёрстки на реальных устройствах — идеальный, но не всегда доступный вариант: не у каждого есть под рукой набор из старого маленького телефона, современного крупного смартфона, планшета и пары мониторов разной ширины. К счастью, для большинства случаев этого и не требуется.
Режим эмуляции устройств в инструментах разработчика браузера позволяет переключаться между заранее заданными профилями популярных телефонов и планшетов, а также задавать произвольную ширину и высоту окна вручную, что покрывает подавляющее большинство практических сценариев проверки.
Важно понимать ограничения такой эмуляции — она честно меняет размеры видимой области и метаданные вроде user agent, но не всегда точно воспроизводит особенности конкретного устройства вроде реальной скорости процессора или специфики рендеринга шрифтов на разных операционных системах.
Простое растягивание окна браузера мышкой — недооценённый, но очень быстрый способ проверить, как макет реагирует на промежуточные ширины экрана, между стандартными точками перелома. Часто именно так находятся моменты, где вёрстка выглядит тесной или разваливается ещё до достижения следующего брейкпоинта.
Для финальной проверки перед публикацией всё же стоит хотя бы раз открыть сайт на реальном телефоне — эмуляция отлично покрывает разработку, но живое устройство иногда показывает нюансы вроде поведения залипающей шапки при открытии клавиатуры, которые сложно смоделировать в браузере на компьютере.
Сервисы, показывающие скриншот страницы сразу на нескольких виртуальных устройствах одновременно, тоже существуют и удобны для быстрого визуального контроля, особенно перед сдачей проекта клиенту, когда важно показать результат сразу во всех основных разрешениях.
Подробнее про режим эмуляции устройств рассказано в разделе про Device Mode в документации Chrome DevTools.
