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

Обновлено: 06.01.2025

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

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

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

Такие функции, как наведение мыши, необязательно работают, и ваше приложение может оказаться неработоспособным. Но как можно протестировать систему и обойтись без переключения между несколькими устройствами?

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

Запустите Chrome , перейдите на веб-страницу, которую хотите тестировать, и откройте « Инструменты разработчика » ( Меню > Инструменты > Инструменты разработчика, Cmd+Opt+I в Mac или F12 / Ctrl+Shift+I в Windows и Linux ).

Кликнете по иконке « Настройки » ( Settings ) в правом верхнем углу и откройте секцию « Переопределения » ( Overrides ), чтобы включить функцию « Показывать эмуляцию в консоли » ( Show ‘Emulation’ view in console drawer ):

Закройте настройки и откройте Console Drawer (это не то же самое, что обычная консоль), кликнув по его иконке (слева от зубчатого значка настроек) или нажав ESC .

В Console Drawer вы увидите вкладку « Эмуляция » ( Emulation ) – если ее там нет, попробуйте перезапустить Chrome :

Раздел « Устройство » ( Device ) предоставляет несколько дюжин предустановок для распространенных мобильных устройств включая iPhone , iPad , Kindle , планшеты Nexus , смартфоны Samsung Galaxy и т.д. Выбор одного из устройств определит соответствующие значения по умолчанию в панелях настроек.

Примечание : инструкции, приведенные выше, включающие режим эмуляции, соответствуют Chrome версии 32. Если вы используете более позднюю версию Chrome Canary, тогда вы можете найти эту опцию в меню «Настройки» > вкладка «Общие» > раздел «Внешний вид».

Экран

Опция « Экран » ( Screen ) позволяет задать:

разрешение устройства;
соотношение пикселей, например, 2 для дисплеев Apple Retina, где реальное разрешение – это удвоенное разрешение области просмотра;
коэффициент масштабирования шрифта.

Пользовательский агент (User Agent)

В разделе « Пользовательский агент » ( User Agent ) можно подделать строку пользовательского агента, тогда клиент и код серверной части будут реагировать соответствующим образом:

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

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

Сенсоры

Опция « Сенсоры » ( Sensors ) позволяет эмулировать аппаратные средства устройства, включая сенсорный экран, геолокацию и акселерометр:

Разрешение эмуляции сенсорного экрана переключает курсор мыши на более короткую тень, размером с кончик пальца:

События с множественными касаниями, например, сжимание, могут быть имитированы зажатием кнопки Shift и перетаскиванием мышью.

Режим сенсорного экрана запускает соответствующие JavaScript события, такие как touchstart , touchmove и touchend .

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

Возвращение в режим браузера

Для завершения эмуляции устройства, вернитесь назад в раздел « Устройство » ( Device ) и нажмите кнопку « Сброс » ( Reset ).

Мне не нужно никакое устройство!

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

Также вы должны знать, что эмулятор не совершенен:

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

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

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

Данная публикация представляет собой перевод статьи « How to Use Mobile Emulation Mode in Chrome » , подготовленной дружной командой проекта Интернет-технологии.ру

По данным статистического сервиса StatCounter , мобильные браузеры на фоне всех браузеров, установленных на различных типах устройств – на ПК, ноутбуках, планшетах, смартфонах и т.п. – заняли второе почётное место с долей рынка в 15,8%. Первенство в этом списке долгое время удерживает десктопный браузер Google Chrome , и по итогам прошедшего года он занял почти 40% рынка. Мобильным браузерам всем вместе удалось опередить таких десктопных монстров, как Mozilla Firefox , Internet Explorer , Microsoft Edge , Opera , Safari .

Опередили они и веб-обозреватели, установленные на планшетах. StatCounter отдельно подсчитывает визиты пользователей с мобильных устройств (смартфонов и телефонов) и отдельно с планшетов. Так вот планшетным браузерам досталось всего лишь 2,5% рынка.

Актуальность мобильных устройств со временем будет только расти, мобильный Интернет – только развиваться. Эти факты очевидны. И адаптация сайтов под мобильные устройства – давно уже не полезный совет их владельцам, а факт Must Have. При создании сайта или блога необходимо подбирать адаптивный веб-дизайн, чтобы содержимое ресурса удачно смотрелось на экране любого устройства. Но заботиться о корректности интерфейса в mobile-версии нужно не только веб-дизайнерам, владельцам сайтов или блоггерам. В процессе раскрутки YouTube -канала или аккаунтов в соцсетях их авторам не лишним будет время от времени отслеживать юзабилити публикуемого контента в мобильных браузерах. Безусловно, мобильная адаптация интерфейса соцплощадок – сфера ответственности их создателей. Но насколько удачно для маленьких экранов подобраны превью видеороликов, фото публикаций или текстовый формат, это уже зависит от самих авторов контента.

Для тестирования mobile-интерфейса не нужно приобретать массу устройств с различными размерами экрана, можно просто воспользоваться эмуляторами, существующими в веб-формате или устанавливаемыми в среды десктопных операционных систем. Рассмотрим ниже некоторые их них.

1. Режим разработчика в Google Chrome

Десктопный браузер Chrome предусматривает возможность тестирования сайтов в mobile-формате. Находясь на тестируемом сайте, необходимо клавишей F12 запустить режим разработчика и включить отображение мобильной версии. Такая функция режима разработчика предусматривает адаптацию интерфейса под экраны распространённых смартфонов и позволяет задавать произвольные разрешения.

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

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

2. Расширение для Chrome Mobile Browser Emulator

Другой способ посмотреть, насколько читабельно смотрится сайт на различных экранах – использование Chrome-расширения Mobile Browser Emulator. Оно встраивается на панель инструментов браузера и являет собой небольшое окошко с настройками запуска страницы в формате, адаптированном под разные разрешения и диагонали экрана. Первым делом необходимо указать расширению реальную диагональ экрана – диагональ используемого монитора или ноутбука, чтобы отображение веб-контента адаптировалось максимально корректно. В строке «monitor size» прописываем диагональ и жмём кнопку рядом «set».

Теперь можно приступать к тестированию. Чтобы проверить юзабилити сайта на планшетах, кликаем графу «Tablet» и последовательно применяем различные пресеты: в графе «real screen size» указываем размер экрана планшета, затем чуть выше выбираем одно из двух типичных для этих устройств разрешений.

В графе «Phones» представлены три типа стандартных разрешений экранов смартфонов и телефонов.

После выбора настроек тестируемый сайт откроется в отдельном окошке и будет выглядеть так, как выглядел бы в окне выбранного устройства, в частности, в mobile-версии на маленьких экранах.

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

Расширение не эмулирует сенсорное управление, пролистывать сайты в окошках реализуемого им mobile-формата можно обычным скроллингом при помощи колеса мыши.

3. Opera Mobile Classic Emulator

Специально для тестирования mobile-версий сайтов разработчик Opera Software создал эмулятор своего мобильного браузера Opera Mobile – Opera Mobile Classic Emulator. Это бесплатная программа для Windows, Mac и Linux. При её запуске необходимо выбрать предпочитаемый язык.

Затем указать параметры эмулируемого устройства – либо выбрать его из перечня слева из числа известных смартфонов и планшетов, либо оставить значение «Custom» и самостоятельно определить параметры в блоке справа. В этом блоке для устройства можно указать разрешение, DPI , тип эмулируемого управления (сенсорный, с помощью клавиатуры или мыши) , масштаб и пр. По итогу жмём «Запустить».

И далее в отдельном окошке можем тестировать тот или иной сайт. Программа полностью эмулирует браузер Opera Mobile с его интерфейсом и функционалом.

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

March 22, 2014

На сегодняшний день тестирование страниц становиться непростой задачей. Времена, когда проверка работоспособности сайта ограничивалась парой браузеров, давно прошли.

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

Процесс тестирования также усложняется благодаря устройствам с сенсорным экраном и мониторов с высоким разрешением. Если вы ведете разработку проекта на обычном PC с помощью таких же обычных мыши и клавиатуры, то вам будет трудно оценить работоспособность вашего кода в реальных условиях (на всех вышеперечисленных устройствах). Такая возможность, как событие мыши может не работать и ваше приложение становиться неработоспособным. Но тогда каким же образом можно протестировать программу и избежать при этом необходимости переключения между различными устройствами?

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

Раздел Device предоставляет несколько дюжин готовых предустановок для большинства популярных мобильных устройств, включая iPhone, iPad, Kindles, планшеты Nexus, смартфоны Samsung Galaxy и т. д. Выбор одного из устройств приводит к изменениям настроек в остальных разделах.

Выбираем из списка нужное устройство и жмем кнопочку “Emulate” внизу этого списка:

В разделе Screen можно самостоятельно установить настройки экрана эмулируемого устройства:

В этом разделе настраивается режим агента пользователя. То есть, устанавливается модель взаимодействия между эмулируемыми клиентом и сервером:

В этом разделе настраивается режим эмуляции сенсорного экрана:

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

Эмуляция multi-touch может быть выполнена при помощи зажатой клавиши Shift и движения мыши в нужную сторону. Этот режим задействует соответствующие JavaScript-события, такие как , , . Также делается попытка полностью соответствовать мобильным браузерам благодаря реализации JavaScript-события , но это событие возникает только тогда, когда будет произведено “нажатие” на элемент интерфейса. Эмулятор корректно игнорирует событие , возникающее, когда курсор сенсорного устройства просто движется поверх элемента интерфейса.

Возвращение браузера в обычный режим

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

Мне больше не нужны устройства

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

Стоит также обратить внимание, что эмулятор несовершенен в следующих вопросах:

вы можете столкнуть с некоторыми необъяснимыми ошибками в работе эмулятора
CSS-событие все еще в действии и
для него нет механизма эмуляции; страница будет сгенерирована браузером Chrome вне зависимости от того, все ли устройства поддерживают возможности, заложенные в ней

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

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

От переводчика

Для браузера Safari автор рекомендует расширение Resize или ResizeMe. Под браузер Mozilla Firefox имеется плагин Firesizer. А под браузер Google Chrome автором рекомендуется использовать расширение Windows Resizer.

Например, после установки и активизации расширения Windows Resizer под Chrome при щелчке мыши на иконке появиться окно с предустановленными размерами экранов устройств:

В дальнейших объяснениях работа с плагином не нуждается, как мне кажется.

Александр Кузнецов | 10 Мая, 2017 - 22:17

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

Откройте на компьютере браузер Google Chrome, перейдите в Chrome Web Store, найдите расширение User-Agent Switcher и установите его. На адресной панели Chrome появится кнопка этого расширения, которая выглядит как глобус. Нажмите на неё и в выпадающем меню выберите новый User-Agent — Android > Samsung Galaxy S3 или iOS > iPhone. Активная вкладка перезагрузится и перед вами будет мобильная версия сайта. Имейте в виду, что User-Agent будет меняться для всех сайтов, а не только для той вкладки, что была открыта.

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

В каких случаях вам могут понадобиться мобильные версии сайтов на десктопном компьютере? Например, в тех, когда важно расходовать меньше трафика. Кроме того, мобильные сайты, как правило, работают быстрее и у них менее перегруженный интерфейс, близкий к мобильным приложениям. Веб-мастера используют подмену User-Agent для того, чтобы посмотреть, как их сайты выглядят на разных платформах и на экранах с разными соотношениями сторон. Для этого им не нужно покупать отдельные устройства, достаточно просто открыть сайт в Chrome и с помощью расширения выбрать нужный гаджет. Ещё одна немаловажная деталь: некоторые мобильные сайты предлагают дополнительную функциональность, недоступную на их десктопных версиях. Например, в скором времени Instagram позволит загружать фотографии через мобильный сайт, а подменив User Ager, вы сможете делиться снимками прямо с компьютера, предварительно обработав их в графическом редакторе.

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

Но ведь тоже самое можно сделать и в обычном десктопном браузере, включив в панели разработчика режим эмуляции. Давайте посмотрим, как воспользоваться им в Chrome , Mozilla , Opera и Microsoft Edge .

В Google Chrome

Находясь на странице тестируемого сайта, откройте главное меню браузера и выберите в нём «Дополнительные инструменты» -> «Инструменты разработчика».

В открывшейся справа или снизу панели кликните по значку «Toggle device toolbar» или нажмите комбинацию клавиш Ctrl + Shift + M . В левой колонке окна Chrome тут же отобразится сайт с примененным к нему адаптивным шаблоном. Чтобы выбрать конкретное мобильное устройство, вызовите выпадающий список «Responsive» и укажите в нём наиболее подходящую модель мобильного гаджета. Если нужной вам модели в списке не окажется, выберите в этом же меню опцию «Edit».

И поищите ее в расширенном списке устройств. В случае отсутствия модели, нажмите «Add custom device».

И добавьте ее вручную, указав разрешение экрана.

После нажатия «OK» модель появится в списке «Responsive».

В Mozilla Firefox

В браузере Firefox нужно открыть главное меню и выбрать в нём «Веб-разработка».

«Адаптивный дизайн».

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

И отмечаем галочкой в расширенном списке наиболее подходящее устройство, а в случае отсутствия шаблона добавляем свое.

В желании можно даже включить эмуляцию сенсорного ввода (мышка станет работать как палец или стилус) .

В Opera

Поскольку Opera построен на том же движке, что и Chrome, эмуляция мобильного браузера в этом веб-обозревателе почти ничем не отличается от эмуляции в Google Chrome.

В главном меню выбираем «Разработка» -> «Инструменты разработчика».

И жмем в открывшейся справа панели иконку «Toggle device toolbar». Далее в меню «Responsive» выбираем подходящее устройство или добавляем его через «Edit».

В Microsoft Edge

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

Вызвав главное меню обозревателя, выберите в нём «Другие инструменты» -> «Средства разработчика».

В открывшейся справа панели кликните по значку «Включить или отключить эмуляцию устройства» и выберите в уже известном вам списке «Responsive» (в Microsoft Edge он называется «Реагирует») свой гаджет или добавьте его, выбрав/создав в списке устройств наиболее соответствующий вашей модели шаблон.

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

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

UC Browser - мировой лидер среди мобильных браузеров, работающий в 150 странах мира, на всех основных операционных системах на 11 языках. Теперь же он работает и на ПК!
Браузер использует в работе 2 движка - Chromium и Trident, позволяя при необходимости быстро переключаться между ними (начиная с версии 5.6, в европейской версии эту возможность убрали, есть только в китайской).
UC Browser полностью настраивается на индивидуальные предпочтения пользователя: реализовано несколько графических оболочек, удобное добавление сайтов в закладки и навигация по ним, импорт закладок из других браузеров на ПК, быстрый выбор и смена поисковой системы и т.д.
UC Browser полностью поддерживает расширения и плагины от Google Сhrome, которые можно установить из магазина дополнений, кроме этого имеет и собственный магазин расширений (только в китайской версии).

Pабота с двумя независимыми движками Chromium и Trident, которые можно переключать на лету (начиная с версии 5.6, в европейской версии эту возможность убрали, есть только в китайской);
Работа через свой собственный сервер (включается опционально);
Полностью подходят расширения от хрома, но также встроен и собственный магазин расширений (только в китайской версии);
Мгновенный старт и быстрый серфинг;
Режим непрерывного просмотра, при котором автоматически открывается следующая страница темы, когда вы пролистываете предыдущую страницу до конца ( работает только в китайской версии);
Предварительная загрузка страниц;
Возможность работы выбранных вами сайтов через цепочку прокси-серверов (обход блокировок);
Формирование QR-кодов по вашему запросу почти на любой контент на просматриваемой странице;
Все настройки сохраняются в UDisk, оттуда же в папку "Мобильные закладки" подтягиваются и закладки с телефона. С других браузеров есть импорт/экспорт в html.
Мощный и удобный менеджер загрузок;

Портативные версии + китайские + руссификаторы от Cento8 на сайте.

Внимание!
Автором сборки добавлены куча расширений, удалите не нужные вам, чтобы уменьшить потребление оперативной памяти компьютера.

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