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

Обновлено: 21.11.2024

Узнайте, как просмотреть и загрузить представление сайта для мобильных устройств в браузере Google Chrome для настольных ПК. Мобильный сайт имеет небольшой экран, а размер современного веб-сайта изменяется под размер экрана.

Если вы разработчик и хотите просматривать мобильную версию сайта в браузере настольного компьютера, таком как Google Chrome, воспользуйтесь приведенным ниже советом. Это может помочь вам быстро изменить внешний вид сайта с рабочего стола на мобильный и протестировать внешний вид интерфейса.

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

Неделю назад мой брат работал над собственным игровым веб-сайтом, когда обратился ко мне за помощью. Он хотел посмотреть, как выглядит веб-сайт на мобильном устройстве, пока он работает на своем компьютере. Мобильный сайт Google Chrome View был единственным решением!

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

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

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

Вот как включить мобильное представление в Chrome на любом компьютерном устройстве:

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

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

Итог: адаптивный сайт Chrome Computer для мобильных устройств

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

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

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

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

Наконец, вот рекомендуемые веб-браузеры для вашего компьютера и мобильного телефона, которые вы должны попробовать.

< /tr>

Windows	MacOS	iOS	Android	Linux
Chrome Windows	Chrome Mac	Chrome iOS	Chrome Android	Firefox Linux
Firefox Windows	Safari Mac	Safari iOS	Edge Android	Chrome Linux< /td>
Edge Windows	Firefox Mac	Edge iOS	Samsung Internet	Edge Linux

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

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

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

Однако разработчики должны помнить, что в первом квартале 2021 года 54,8 % глобального трафика веб-сайтов приходилось на мобильные устройства. В результате им необходимо убедиться, что веб-сайты хорошо оптимизированы для работы в мобильных браузерах. Chrome, бесспорно, является ведущим мобильным браузером с текущей долей рынка 64,06% по всему миру.Поэтому тестирование мобильных версий веб-сайтов в Chrome имеет решающее значение.

Источник

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

Зачем тестировать мобильную версию веб-сайта в реальных браузерах Chrome?

Как упоминалось выше, Chrome — самый популярный браузер на рынке. Учитывая, что значительное количество пользователей выходит в Интернет через Chrome, любой веб-сайт или веб-приложение должны быть совместимы с ним, чтобы адекватно обслуживать этих пользователей. Кроме того, существует несколько версий Chrome, и веб-сайт должен безупречно отображаться и работать в каждой из них. Также возникает вопрос о том, как конкретная версия Chrome может взаимодействовать с аппаратными характеристиками конкретного устройства, добавляя еще один уровень проверки, необходимый в конвейере разработки веб-сайта.

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

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

Теперь давайте рассмотрим два способа просмотра мобильных версий веб-сайтов в Chrome.

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

Пользователи могут просматривать мобильную версию веб-сайта с помощью Chrome Devtools.

Обратите внимание, что это не совсем надежный метод, поскольку для выполнения работы он использует симулятор, а не реальное устройство и браузеры. Следовательно, он не может воспроизвести все реальные пользовательские условия, а это означает, что любые тесты, выполняемые этим методом, будут безрезультатными. Для получения 100% точных результатов используйте второй способ — использование реальных браузеров.

Ниже перечислены шаги для просмотра мобильной версии веб-сайта в Chrome:

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

Облако реальных устройств BrowserStack для живого тестирования

Идеальный способ протестировать веб-сайт — протестировать его на реальном устройстве. Это помогает разработчикам отслеживать веб-сайты в мобильных браузерах, установленных на реальных устройствах Android и iOS. Таким образом специалисты по контролю качества могут оценить, как веб-сайт работает на разных мобильных устройствах и в разных браузерах в реальном мире.

Облако реальных устройств BrowserStack предоставляет более 3000 реальных устройств и браузеров для тестирования.

Вот краткое руководство о том, как приступить к просмотру мобильной версии веб-сайта в Chrome:

Кроме того, несколько основных моментов реального облака устройств BrowserStack:

Нет необходимости ни в установке, ни в загрузке.
Новейшие устройства Android от Samsung, Oneplus, Google и Motorola.
Новейшие устройства Apple, такие как iPhone X и iPhone 11 Pro.
На реальных устройствах установлено несколько версий ведущих браузеров, таких как Chrome, Firefox, Safari, Opera.

QA может тестировать на любом реальном мобильном устройстве Android или iOS прямо из своего браузера. Им не нужно скачивать никаких браузеров или эмуляторов. Чтобы открыть мобильную версию веб-сайта в Chrome, тестировщики могут просто войти в систему, выбрать комбинацию «устройство-браузер-ОС» и начать тестирование. Изображение ниже является точным представлением сеанса живого тестирования (тестирование браузера Chrome на Samsung S10+) в BrowserStack.

BrowserStack также предоставляет следующие возможности:

Предварительный доступ к DevTools, который позволяет проверять веб-элементы на странице с помощью популярных инструментов для создания отчетов об ошибках, таких как Jira, Trello и Slack.
Тестирование таких функций, как масштабирование и поворот устройства.

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

Джо Федева

Джо Федева
штатный писатель

Джо Федева — штатный автор How-To Geek. Он освещает потребительские технологии более десяти лет и ранее работал редактором новостей в XDA Developers. Джо любит все, что связано с технологиями, а также в глубине души заядлый любитель делать что-то своими руками. Он написал тысячи статей, сотни руководств и десятки обзоров. Подробнее.

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

Возможно, вы занимаетесь веб-разработкой и хотите проверить, насколько отзывчив ваш веб-сайт, или вам просто любопытно. В любом случае, вы можете быстро проверить это в меню Chrome «Проверить». Мы покажем вам, как это работает.

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

Нажмите правой кнопкой мыши пустое место и выберите в меню "Проверить".
Используйте сочетание клавиш Ctrl + Shift + I (это заглавная буква "i").

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

Страница сразу переключится на мобильную версию. По умолчанию он находится в «Адаптивном» режиме, и вы можете перетащить ручку с правой стороны, чтобы увидеть, как страница динамически меняется по мере расширения экрана.

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

Закройте меню "Проверить" или снова нажмите значок устройства, чтобы вернуться к макету рабочего стола.

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

› 5 вещей, которые вы, вероятно, не знали о GIF-файлах
› Что означает ИК и как вы его используете?
› 7 основных функций Microsoft Excel для составления бюджета
› Matter — это долгожданный стандарт умного дома
› Сколько оперативной памяти требуется вашему ПК?
› Что такое GrapheneOS и как она делает Android более приватным?

Крис Хоффман

Крис Хоффман
Главный редактор

Крис Хоффман – главный редактор How-To Geek. Он писал о технологиях более десяти лет и два года был обозревателем PCWorld. Крис писал для The New York Times и Reader's Digest, давал интервью в качестве эксперта по технологиям на телевизионных станциях, таких как NBC 6 в Майами, и освещал свою работу в новостных агентствах, таких как Би-би-си. С 2011 года Крис написал более 2000 статей, которые были прочитаны почти миллиард раз — и это только здесь, в How-To Geek. Подробнее.

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

Вы можете сделать это, изменив пользовательский агент вашего браузера — ранее мы объясняли, что такое пользовательский агент браузера. Доступ к веб-сайту с помощью пользовательского агента iPad также может заставить его показывать вам видео в формате HTML5, что хорошо, если вы пытаетесь избежать использования Flash.

Расширения переключателя агента пользователя

Мы рассмотрели, как изменить пользовательский агент вашего браузера без установки какого-либо другого программного обеспечения.Однако для простоты использования вы, вероятно, захотите установить расширение для браузера, которое позволит вам быстро и легко изменить пользовательский агент вашего браузера.

В зависимости от того, какой браузер вы используете, вам потребуется установить User-Agent Switcher для Chrome или User Agent Switcher для Firefox. Для Internet Explorer вы можете попробовать надстройку UAPick User-Agent Switcher.

Настройка мобильного агента пользователя

Чтобы изменить пользовательский агент, найдите значок расширения User Agent Switcher на панели инструментов браузера, щелкните его и выберите мобильный пользовательский агент в списке.

(Возможно, вам потребуется добавить значок переключателя агента пользователя на панель инструментов Firefox после его установки. Для этого щелкните правой кнопкой мыши панель инструментов, выберите «Настроить» и перетащите значок переключателя агента пользователя на панель инструментов Firefox.)

Обновите страницу, на которой вы сейчас находитесь (щелкните значок «Обновить» на панели инструментов или просто нажмите F5), и вы увидите ее мобильную версию. Вы можете получить доступ к другим веб-сайтам и видеть их мобильные версии до тех пор, пока ваш пользовательский агент настроен на мобильный пользовательский агент.

Когда вы закончите, выберите параметр User Agent по умолчанию.

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

Дополнительные пользовательские агенты

Некоторые переключатели пользовательских агентов не имеют полного списка пользовательских агентов. Например, расширение User Agent Switcher для Firefox не включает параметр, который позволяет вам настроить пользовательский агент на iPad.

Вы можете загрузить дополнительные пользовательские агенты, щелкнув значок User Agent Switcher и выбрав Edit User Agents. Щелкните ссылку Загрузить списки пользовательских агентов для импорта, и вы сможете загрузить и импортировать более полный список пользовательских агентов.

Если вы предпочитаете вводить строку пользовательского агента вручную, вы можете найти их на таких веб-сайтах, как веб-сайт Mobile Browser ID (User-Agent) Strings.

Например, пользовательский агент для iPad с Safari и iOS 6:

Mozilla/5.0 (iPad; CPU OS 6_0, например Mac OS X) AppleWebKit/536.26 (KHTML, например Gecko) Version/6.0 Mobile/10A403 Safari/8536.25

Изменение пользовательского агента также может быть использовано для других целей. Например, вы можете настроить пользовательский агент своего браузера на Googlebot и обойти случайный платный доступ к газете или использовать веб-сайт только для Internet Explorer без перенаправления. К счастью, веб-сайты только для IE уже не очень распространены.

› Что такое GrapheneOS и как она делает Android более приватным?
› Что означает ИК и как вы его используете?
› Matter — это долгожданный стандарт умного дома
› 7 основных функций Microsoft Excel для составления бюджета
› 5 вещей, которые вы, вероятно, не знали о GIF-файлах
› Сколько оперативной памяти требуется вашему ПК?

Читайте также: