Совет Теплицы: как посмотреть мобильную версию сайта в браузере

Проверяем, как работает сайт на разных устройствах Изображение: unsplash.com

С каких устройств вы заходите на свой сайт? Наверное, чаще всего с компьютера или телефона. Чуть реже с планшета и всех прочих устройств. Страшный сон разработчика — теперь нужно делать мобильную адаптацию сайта еще и под часы, а все к этому и идет.

Конечно, хорошо бы знать, с каких устройств люди заходят к вам на сайт. И как при этом сайт у них отображается. Чтобы все корректно работало и никакие элементы не сползали в стороны. С каких устройств заходят на сайт, узнать просто. Настраиваем Google Analytics или Яндекс.Метрику, и в отчетах будут видны устройства посетителей.

Но как узнать, что сайт нормально работает на разных устройствах, например, в телефонах? Для этого в браузере есть прекрасная функция «режим адаптивного дизайна». Например, в Firefox нужно нажать сочетание клавиш Ctrl + Shift + M, и вот что получится:

Изображение: скриншот мобильного режима сайта Теплицы
Изображение: скриншот мобильного режима сайта Теплицы.

На верхней строке можно менять разрешение экрана вручную. Или в выпадающем списке выбрать нужное устройство. В Chrome работает это же сочетание. Но если вдруг не получится, есть второй способ.

Заходим на сайт, правой кнопкой мыши кликаем внутри главной страницы и выбираем «Просмотреть код». А потом включаем вот этот режим:

Изображение: скриншот мобильного режима сайта Теплицы
Изображение: скриншот мобильного режима сайта Теплицы.

То есть нужно нажать на знак с двумя экранами, чтобы увидеть мобильную версию сайта. Полезная и удобная функция.

Справка 

Совет Теплицы — это рубрика, в которой наша команда и другие эксперты коротко отвечают на основные вопросы сотрудников некоммерческого сектора и активистов. Если вы хотите что-то спросить у сотрудников Теплицы или узнать о чем-то более подробно, напишите нам в комментариях.