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

сайты мобильной версии на вашем ПК

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

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

Как просмотреть мобильную версию веб-сайта в 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. Запустите браузер Safari.
  2. Перейдите на сайт, который хотите просматривать как мобильную версию.
  3. Нажмите «Параметры», а затем в меню «Разработка».
  4. В раскрывающемся меню выберите «Войти в режим адаптивного дизайна».
  5. Теперь вы можете просмотреть мобильную версию сайта.

Дополнительные ответы на часто задаваемые вопросы

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

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

  1. Перейдите на веб-сайт, который хотите видеть на рабочем столе.
  2. Коснитесь трехточечного значка, чтобы открыть меню.
  3. Теперь выберите вариант «Просмотр рабочего стола».

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

Легкие браузеры – 4 лучших

Упростите дизайн своего мобильного сайта

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

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

Похожие записи

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

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