Если вы веб-разработчик или владелец онлайн-бизнеса, вам может быть интересно узнать, как мобильный сайт выглядит на компьютере. Внешний вид и функциональность вашего мобильного сайта могут иметь решающее значение, поскольку более половины интернет-трафика поступает с телефонов. Клиенты с большей вероятностью останутся на сайте дольше или купят что-то, если это визуально привлекательно. Вид рабочего стола также может помочь вам быстрее вносить изменения и устранять возможные проблемы.
К счастью, это относительно простой процесс. В этой статье мы покажем вам, как просматривать мобильную версию веб-сайта на разных устройствах и в разных браузерах.
Как просмотреть мобильную версию веб-сайта в 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 можно просматривать и мобильную версию веб-сайта.
- Запустите браузер Сафари.
- Перейдите на веб-сайт, который вы хотите просмотреть в мобильной версии.
- Нажмите «Параметры», а затем в меню «Разработка».
- В раскрывающемся меню выберите «Войти в режим адаптивного дизайна».
- Теперь вы можете просматривать мобильную версию сайта.
Дополнительный FAQ
Могу ли я просмотреть настольную версию веб-сайта на своем телефоне?
Ответ - да! Вы можете переключиться с мобильной версии на настольную, чтобы проверить ее без использования компьютера. Шаги по переходу с мобильной версии на настольную в Chrome следующие:
1. Перейдите на веб-сайт, который вы хотите видеть в режиме рабочего стола.
2. Нажмите на значок с тремя точками, чтобы открыть меню.
3. Выберите параметр «Просмотр рабочего стола».
Имейте в виду, что эти шаги могут различаться в зависимости от используемого телефона.
как удалить пунктирные линии в Excel
Создание мобильного веб-дизайна проще
Инструменты разработчика отлично подходят для анализа и изменения мобильной версии веб-сайта на настольном компьютере без переключения устройств. Вы можете изменить размер экрана, чтобы увидеть, как компоненты работают на различных устройствах. Вы можете настроить различные компоненты и создать веб-сайт для разных размеров экрана, используя адаптивный режим.
При разработке веб-сайта дизайнер всегда должен помнить о том, как внешний вид сайта отображается на телефонах, планшетах и настольных компьютерах. Использование методов, описанных в статье, также может помочь разработчику сделать это, а также определить, какие компоненты веб-сайта создают проблемы, чтобы исправить их.
Вы когда-нибудь пробовали просматривать мобильную версию сайта на компьютере? Какой браузер вы предпочитаете использовать для этого? Дайте нам знать в комментариях ниже.
