Как просматривать сайты в мобильной версии
Если вы веб-разработчик или владеете онлайн-бизнесом, вам может быть интересно, как мобильный сайт выглядит на настольном компьютере. Внешний вид и функциональность вашего мобильного сайта могут иметь решающее значение, поскольку более половины интернет-трафика поступает с телефонов. Клиенты с большей вероятностью останутся на сайте подольше или купят что-нибудь, если это визуально привлекательно. Просмотр мобильных сайтов на вашем компьютере также может помочь вам внести изменения и устранить любые проблемы.
К счастью, это относительно простой процесс. В этой статье мы покажем вам, как просматривать режим смартфона в браузере ПК на разных устройствах и в разных браузерах.
Как просмотреть мобильную версию веб-сайта в Chrome на Mac
В Chrome вы можете протестировать интерфейс и убедиться, что все компоненты веб-сайта работают правильно, используя один интегрированный инструмент разработки под названием DevTools. Поскольку DevTools предоставляет предопределенный выбор устройств, это лучший способ для разработчика быстро переместить представление с настольного компьютера на мобильный и обратно без каких-либо расширений разработчика.
Вы также можете изменить размер экрана в соответствии с вашими потребностями и настроить ширину и высоту экрана, чтобы увидеть, как ваш веб-сайт будет выглядеть на экранах разных размеров. Чтобы сделать это на Mac, выполните следующие действия:
- Запустите браузер Google Chrome и перейдите на сайт, который хотите просмотреть.
- Нажмите F12 на клавиатуре, чтобы войти в DevTools.
- Когда режим активен, щелкните значок «Включить / отключить эмуляцию устройства».
- Вы можете выбрать из списка устройств iOS и Android, чтобы имитировать их.
- Веб-сайт будет отображаться в выбранном вами мобильном модуле.
По завершении закройте окно инструментов разработчика, чтобы закрыть мобильную версию веб-сайта.
Как просмотреть мобильную версию веб-сайта в Chrome на ПК с Windows
Если вы хотите просмотреть мобильную версию веб-сайта на ПК с Windows в Chrome, это очень похожий процесс:
- Откройте браузер Chrome.
- В Chrome перейдите на сайт, который хотите видеть в мобильной версии.
- Щелкните правой кнопкой мыши веб-страницу и выберите в меню «Проверить».
- Чтобы получить доступ к инструментам разработчика, щелкните вкладку «Дополнительные инструменты» и выберите «Инструменты разработчика» или нажмите F12, чтобы открыть DevTools.
- Откроется окно инструментов разработчика.
- Щелкните значок «Переключить устройство», чтобы переключиться в режим просмотра мобильного сайта.
- Выберите мобильное устройство, которое хотите эмулировать (необязательно).
- Теперь вы можете изменить размер экрана в соответствии с вашими потребностями.
Как просмотреть мобильную версию веб-сайта в Chrome на Chromebook
Доступ к мобильной версии веб-сайта в Chrome с помощью Chromebook очень похож на первые два метода.
- Откройте веб-браузер Google Chrome.
- Откройте веб-страницу, к которой хотите получить доступ, на своем мобильном устройстве.
- Чтобы получить доступ к меню, щелкните значок с тремя вертикальными точками.
- Перетащите указатель мыши на элемент «Другие инструменты» в списке.
- Выберите «Инструменты разработчика».
- В вашем браузере откроется окно инструментов разработчика.
- Включите или выключите режим просмотра мобильного сайта, щелкнув значок переключения устройства.
Отобразится пользовательский интерфейс мобильного сайта. Вы также можете выбрать предпочтительное устройство, выбрав марку и модель в раскрывающемся списке. Веб-страница будет обновляться как сайт для настольных компьютеров каждый раз, когда вы закрываете консоль инструментов разработчика.
Как просмотреть мобильную версию веб-сайта в Firefox на Mac
Вы можете использовать другие веб-браузеры, такие как Firefox, для просмотра мобильного сайта на рабочем столе Mac.Изменение размера окна браузера – один из методов, используемых большинством веб-разработчиков для оценки веб-сайта с адаптивным дизайном. Однако в большинстве случаев эта альтернатива кажется неприемлемой.
Здесь пригодятся функции веб-разработки браузера Firefox. Вы можете просматривать свои веб-страницы в различных разрешениях, если знаете, как получить доступ к мобильным версиям веб-сайтов в Firefox. Следуй этим шагам:
- Откройте мобильную версию сайта, которую хотите увидеть.
- Щелкните правой кнопкой мыши веб-страницу и выберите в меню пункт «Проверить».
- Выберите «Режим адаптивного дизайна».
- Выберите размер экрана сайта.
Как просмотреть мобильную версию веб-сайта в Firefox на ПК с Windows
ПК с Windows также могут просматривать мобильные версии веб-сайтов с помощью Firefox. Вот как это сделать:
- Запустите Firefox на вашем ПК.
- Перейдите на сайт, который хотите видеть в мобильной версии.
- Перейдите в «Настройки», щелкнув значок с тремя горизонтальными полосами.
- Вы увидите раскрывающееся меню, в котором вам нужно будет выбрать вариант «Веб-разработчик».
- Выберите «Режим адаптивного дизайна».
- Наконец, вы можете выбрать модель смартфона, чтобы увидеть, как ваш сайт будет выглядеть на этом устройстве.
Как просмотреть мобильную версию веб-сайта в Safari на Mac
Мы объяснили, как просматривать мобильный веб-сайт на рабочем столе с помощью Chrome и Firefox. Но как насчет браузера по умолчанию, который поставляется с устройствами Mac, Safari? К счастью, здесь вы также можете просмотреть мобильную версию веб-сайта в Safari.
- Запустите браузер Safari.
- Перейдите на сайт, который хотите просматривать как мобильную версию.
- Нажмите «Параметры», а затем в меню «Разработка».
- В раскрывающемся меню выберите «Войти в режим адаптивного дизайна».
- Теперь вы можете просмотреть мобильную версию сайта.
Дополнительные ответы на часто задаваемые вопросы
Могу ли я просматривать настольную версию веб-сайта на моем телефоне?
Ответ положительный! Вы можете переключиться с мобильной версии на настольную, чтобы проверить ее без использования компьютера. Чтобы переключиться с мобильной версии на настольную в Chrome, выполните следующие действия:
- Перейдите на веб-сайт, который хотите видеть на рабочем столе.
- Коснитесь трехточечного значка, чтобы открыть меню.
- Теперь выберите вариант «Просмотр рабочего стола».
Обратите внимание, что эти действия могут отличаться в зависимости от используемого телефона.
Легкие браузеры – 4 лучших
Упростите дизайн своего мобильного сайта
Инструменты разработчика отлично подходят для анализа и редактирования мобильной версии веб-сайта на рабочем столе без переключения устройств. Вы можете изменить размер экрана, чтобы увидеть, как компоненты работают на различных устройствах. Вы можете настроить различные компоненты и создать веб-сайт для разных размеров экрана, используя адаптивный режим.
При разработке веб-сайта дизайнер всегда должен помнить, как выглядит его интерфейс на телефонах, планшетах и настольных компьютерах. Использование методов, описанных в статье, также может помочь разработчику сделать это, а также определить, какие компоненты веб-сайта создают проблемы, чтобы их исправить.