Как просмотреть мобильную версию сайта на ПК

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

К счастью, это относительно простой процесс. В этой статье мы покажем вам, как просматривать мобильную версию веб-сайта на разных устройствах и в разных браузерах.

Как просмотреть мобильную версию веб-сайта в Chrome на Mac

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

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

1. Запустите браузер Google Chrome и перейдите на сайт, который хотите просмотреть.
   
2. Нажмите F12 на клавиатуре, чтобы получить доступ к DevTools.
   
3. Когда режим включен, нажмите значок «Переключить эмуляцию устройства».
   
4. Вы можете выбрать из списка устройств iOS и Android для их эмуляции.
   
5. Он покажет веб-сайт в мобильной форме, которую вы выбрали.
   

Когда вы закончите, просто закройте окно инструментов разработчика, чтобы закрыть мобильную версию веб-сайта.

Как просмотреть мобильную версию веб-сайта в Chrome на ПК с Windows

Если вы хотите просмотреть мобильную версию веб-сайта на ПК с Windows в Chrome, это довольно похожий процесс:

1. Откройте браузер Chrome.
   
2. В Chrome перейдите на веб-сайт, который вы хотите видеть в мобильной версии.
3. Щелкните правой кнопкой мыши веб-страницу и выберите «Проверить» в меню.
   
4. Чтобы перейти к инструментам разработчика, щелкните вкладку «Дополнительные инструменты» и выберите «Инструменты разработчика» или нажмите F12, чтобы открыть DevTools.
   
5. Откроется окно инструментов разработчика.
6. Щелкните значок переключения устройств, чтобы переключиться в режим просмотра мобильного сайта.
   
7. Выберите мобильное устройство, которое вы хотите эмулировать (необязательно).
   
8. Теперь вы можете изменить размеры экрана в соответствии с вашими потребностями.

Как просмотреть мобильную версию веб-сайта в Chrome на Chromebook

Доступ к мобильной версии веб-сайта в Chrome с помощью Chromebook очень похож на первые два метода.

1. Откройте веб-браузер Google Chrome.
   
2. Откройте веб-страницу, к которой вы хотите получить доступ, на своем мобильном устройстве.
   
3. Чтобы получить доступ к меню, щелкните вертикальный значок с тремя точками.
   
4. Наведите указатель мыши на пункт «Дополнительные инструменты» в списке.
   
5. Выберите «Инструменты разработчика».
   
6. Откроется окно инструментов разработчика в браузере.
   
7. Переключите режим просмотра мобильного сайта, щелкнув значок переключения устройства.
   

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

Как просмотреть мобильную версию веб-сайта в Firefox на Mac

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

Вот где пригодятся возможности веб-разработки браузера Firefox. Вы можете просматривать свои веб-страницы в разных разрешениях, если знаете, как получить доступ к мобильным версиям веб-сайтов в Firefox. Следуй этим шагам:

1. Откройте мобильную версию сайта, который вы хотите видеть.
2. Щелкните правой кнопкой мыши веб-страницу и выберите в меню пункт «Проверить».
   
3. Выберите «Режим адаптивного дизайна».
   
4. Выберите размер экрана сайта.
   

Как просмотреть мобильную версию веб-сайта в Firefox на ПК с Windows

ПК с Windows также имеют возможность просматривать мобильные версии веб-сайтов с помощью Firefox. Вот как это сделать:

1. Запустите Firefox на вашем ПК.
   
2. Перейдите на сайт, который вы хотите видеть в мобильной версии.
   
3. Перейдите в «Настройки», щелкнув горизонтальную иконку с тремя полосами.
   
4. Вы увидите раскрывающееся меню, в котором вам нужно будет выбрать опцию «Веб-разработчик».
   
5. Выберите «Режим адаптивного дизайна».
   
6. Наконец, вы можете выбрать модель смартфона, чтобы увидеть, как ваш сайт будет выглядеть на этом устройстве.
   

Как просмотреть мобильную версию веб-сайта в Safari на Mac

Мы рассмотрели, как просматривать мобильный веб-сайт на настольном компьютере с помощью Chrome и Firefox. Но как насчет браузера по умолчанию, который поставляется с устройствами Mac, Safari? К счастью, в Safari можно просматривать и мобильную версию веб-сайта.

1. Запустите браузер Сафари.
   
2. Перейдите на веб-сайт, который вы хотите просмотреть в мобильной версии.
   
3. Нажмите «Параметры», а затем в меню «Разработка».
   
4. В раскрывающемся меню выберите «Войти в режим адаптивного дизайна».
   
5. Теперь вы можете просматривать мобильную версию сайта.
   

Дополнительный FAQ

Могу ли я просмотреть настольную версию веб-сайта на своем телефоне?

Ответ - да! Вы можете переключиться с мобильной версии на настольную, чтобы проверить ее без использования компьютера. Шаги по переходу с мобильной версии на настольную в Chrome следующие:

1. Перейдите на веб-сайт, который вы хотите видеть в режиме рабочего стола.

2. Нажмите на значок с тремя точками, чтобы открыть меню.

3. Выберите опцию «Вид рабочего стола».

Имейте в виду, что эти шаги могут различаться в зависимости от используемого телефона.

Создание мобильного веб-дизайна проще

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

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

Вы когда-нибудь пробовали просматривать мобильную версию сайта на компьютере? Какой браузер вы предпочитаете использовать для этого? Дайте нам знать в комментариях ниже.