Как посмотреть сайт в разных разрешениях?

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

Видеоинструкция

В Mozilla Firefox

Посмотреть мобильную версию сайта с компьютера в Mozilla можно аналогично кликнув в любую точку сайта правой клавишей мыши и в меню выбрав «Исследовать элемент».

Переход в просмотр мобильной версии сайта в Mozilla Firefox

Далее в нижнем-правом углу потребуется выбрать вид «Мобильный телефон».

Переход в просмотр мобильной версии сайта в Mozilla Firefox

При необходимости нажав на «Адаптивный» можно выбрать нужную модель смартфона.

Изменение вида смартфона в Mozilla Firefox для мобильной версии сайта

Справа можно настроить разрешение экрана (настраивается вручную).

Изменение разрешения в Mozilla Firefox для мобильной версии сайта

Далее идет возможность изменить ориентацию экрана.

Изменение ориентации страницы в Google Chrome для мобильной версии сайта

После можно изменить DPR (Соотношение пикселей устройства к снимку экрана).

Изменение DPR в Mozilla Firefox для мобильной версии сайта

Как и в Google Chrome можно изменить способ подключения на 2G, 3G, GPS, 4G или

  • Без ограничения;
  • GPRS;
  • Regular 2G;
  • Goog 2G;
  • Regular 3G;
  • Good 3G;
  • Regular 4G/LTE;
  • DSL;
  • Wi-Fi.
Изменение подключения к интернету в Mozilla Firefox для мобильной версии сайта

Также при необходимости можно включить имитацию устройства (требует перезагрузки браузера).

Имитация устройств в Mozilla Firefox для мобильной версии сайта

В Google Chrome

Для того, чтобы открыть мобильную версию сайта с компьютера потребуется открыть Google Chrome и перейти на нужный URL после чего кликнуть правой клавиши мыши в любом месте экрана и в выпавшем меню выбрать пункт «Посмотреть код».

Посмотреть код для просмотра мобильной версии сайта в Google Chrome

В правом-верхнем углу кликаем на значок «Мобильный телефон».

Переход в просмотр мобильной версии сайта в Google Chrome

Теперь сайт открыт с мобильного телефона, а при необходимости можно сменить вид на нужный смартфон/планшет, где справа будет указано расширение.

Изменение модели смартфона в Google Chrome для мобильной версии сайта

Также доступно изменение масштаба.

Изменение масштаба в Google Chrome для мобильной версии сайта

Дополнительно можно выбрать способ отображения (online/offline).

Изменение ориентации страницы в Google Chrome для мобильной версии сайта

При необходимости стоит изменить ориентацию экрана на альбомную или стандартную.

Изменение ориентации страницы в Google Chrome для мобильной версии сайта

Ручной метод

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

Ручное изменение размера браузера и экрана сайта

Подписывайтесь на наш канал в Яндекс.Дзен

Подписывайтесь на наш Telegram-канал

Подписывайтесь на наш Youtube-канал

Подписывайтесь на нашу группу ВКонтакте

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (4 оценок, среднее: 5,00 из 5)
Загрузка...