Как сделать режим телефона в браузере
Обновлено: 06.07.2024
Для ПК существует несколько интересных программ, эмулирующих среду Android. С их помощью получится запускать мобильные приложения непосредственно в Windows. Но также имеется специальное расширение для Хрома. Именно о нем хотелось бы поговорить в этом материале. Разберемся, как установить эмулятор Андроид в браузере Google Chrome и как им пользоваться.
Руководство
Начнем с самого простого и незамысловатого – установки расширения. Да-да, эмулятор действительно существует и, дабы в этом убедиться, предлагаем изучить следующую пошаговую инструкцию:
Теперь на панели инструментов (напротив адресной строки в правой части пользовательского окна) появляется новое лого. Ну что же, приступаем к осмотру графической оболочки.
Использование
Для активации дополнения достаточно кликнуть по ярлыку левой кнопкой мыши. Перед нами появляется выпадающий список, состоящий из трех разделов:
- Запустить Android-эмулятор – активация встроенного функционала и переход на официальный сайт.
- My Apk Manager & Apk Upload – возможность загружать и устанавливать приложения для Андроид через APK-файлы.
- Set userID – это нужно для регистрации и авторизации на сайте разработчиков (после ввода ника нас автоматически перебрасывает на оф. площадку).
Итак, с вопросами графической оболочки разобрались. Давайте перейдем к практическому использованию. Запустить виртуальное устройство можно, если нажать на первый пункт.Затем нужно подождать тридцать секунд, пока приложение не загрузится. Сразу же после вы увидите привычный интерфейс Андроид в планшетной ориентации. По краям основного окна имеется реклама.
В левой верхней части экрана имеется блок Zoom. Он отвечает за увеличение или уменьшение размера рабочей области. А чуть правее расположена панель управления виртуальным устройством. Рассмотрим ключевые ее элементы сверху вниз:
На каждое действие разработчики предусмотрели набор горячих клавиш, подсвечивающийся при наведении курсора.Существует два способа запуска Андроид-приложений:
- С помощью Play Store, но нужно авторизоваться в учетной записи Google.
- Через отдельные APK-файлы.
Для первого вам достаточно кликнуть по соответствующей иконке на рабочем столе, войти в аккаунт, а потом загрузить и открыть нужный софт. А вот второй мы разберем чуть детальнее.
Запуск приложений через APK-файл
Для претворения задуманного в жизнь достаточно выполнить несколько шагов инструкции, представленной ниже:
Подведем итоги
Расширение для сервиса ApkOnline позволяет запускать программы и утилиты, предназначенные только для Андроид. К сожалению, работает оно далеко не идеально и не так быстро, как хотелось бы, но с основной задачей справляется. А если вам нужна более высокая стабильность и производительность – обратитесь к специализированным программам. Самые удачные среди них – BlueStacks и Nox App Player.
Существуют веб-сайты, которые предлагают больше опций и функций при посещении на мобильных устройствах. Когда это происходит, и вы используете настольный браузер, вы расстраиваетесь из-за ограниченного пользовательского опыта, который вы получаете. В других случаях вы можете протестировать и посмотреть, как веб-сайт выглядит на конкретном мобильном устройстве, таком как iPhone, iPad или смартфон Pixel 2. Вот как можно просмотреть (и протестировать) мобильный сайт на настольном ПК:
ПРИМЕЧАНИЕ. Данное руководство охватывает Google Chrome, Mozilla Firefox, Opera, Microsoft Edge и Internet Explorer в Windows. Перейдите в раздел для интересующего вас браузера, чтобы найти шаги, которые вам нужно пройти.
Как активировать эмулятор мобильного браузера в Google Chrome
В Google Chrome загрузите мобильный веб-сайт, который вы хотите просмотреть. Затем нажмите или коснитесь трех вертикальных точек в верхнем правом углу. Это кнопка для «Настройка и управление Google Chrome». В открывшемся меню выберите « Дополнительные инструменты», а затем «Инструменты разработчика». Инструменты разработчика открыты. Чтобы достичь того же результата, вы также можете нажать клавиши CTRL + Shift + I на клавиатуре.
Когда вы закончите, нажмите кнопку X (Закрыть) в правом верхнем углу инструментов разработчика Google Chrome, чтобы вернуться в стандартный режим просмотра рабочего стола.
Как активировать эмулятор мобильного браузера в Mozilla Firefox
В Mozilla Firefox откройте мобильную страницу, к которой вы хотите получить доступ, как если бы вы использовали мобильное устройство. Затем нажмите или нажмите кнопку бургер в правом верхнем углу. Он называется «Открыть меню».
В открывшемся меню выберите « Веб-разработчик» .
Вы видите много вариантов, которые полезны для разработчиков. Тебя интересует «Адаптивный режим проектирования». Нажмите или нажмите на эту опцию. Этот конкретный режим просмотра веб-страницы теперь загружен в Firefox. Того же результата можно достичь, нажав клавиши CTRL + Shift + M на клавиатуре.
Когда вы закончите, нажмите кнопку X (Close Responsive Design Mode) , чтобы вернуться в стандартный режим просмотра рабочего стола.
Как активировать эмулятор мобильного браузера в Opera
В Opera загрузите мобильную страницу, которую хотите просматривать, как если бы вы использовали мобильное устройство. Затем щелкните значок Opera в верхнем левом углу. Это кнопка «Настройка и управление Opera» . В открывшемся меню выберите « Разработчик» и « Инструменты разработчика» . Инструменты разработчика отображаются в правой части окна браузера. Тот же результат может быть достигнут нажатием клавиш CTRL + Shift + I на клавиатуре.
Когда вы закончите, нажмите кнопку X (Закрыть) в верхнем правом углу инструментов разработчика Opera, чтобы вернуться к просмотру на рабочем столе.
Как активировать эмулятор мобильного браузера в Microsoft Edge
В Microsoft Edge загрузите сайт, который вы хотите просмотреть, как если бы вы использовали мобильное устройство. Затем нажмите или коснитесь кнопки «Настройки и другое» , которая находится в правом верхнем углу окна браузера. Его значок выглядит как три точки. Если вы используете Windows 10 October 2018 Update, перейдите в раздел «Дополнительные инструменты», а затем в «Инструменты разработчика». Если вы используете обновление для Windows 10 апреля 2018 или более раннюю версию , выберите « Инструменты разработчика F12» . Инструменты разработчика открываются в нижней части окна браузера. Вы можете добиться того же результата, нажав клавишу F12 на клавиатуре, независимо от того, сколько лет или новее ваша Windows 10.
Вы видите несколько вкладок в инструментах разработчика . Если вы видите эмуляцию , нажмите или нажмите на нее. Если вы этого не сделаете, щелкните или коснитесь стрелки вниз и в открывшемся меню выберите Эмуляция .
Затем нажмите или коснитесь раскрывающегося списка Устройство . Вы можете эмулировать следующие устройства: Lumia 650, Lumia 950, Lumia 950 XL, Surface Book, Surface Pro 4, iPad, iPad Mini, Nexus 5, Nexus 5X и Nexus 6P.
Когда вы закончите, нажмите кнопку X (Закрыть) в верхнем правом углу инструментов разработчика Microsoft Edge, чтобы вернуться к просмотру на рабочем столе.
Как активировать эмулятор мобильного браузера в Internet Explorer
Нажмите или коснитесь вкладки Эмуляция, а затем раскрывающийся список Браузер . Здесь вы должны выбрать Windows Phone в качестве мобильного устройства, и веб-страница будет перезагружена, как если бы вы использовали смартфон с Windows Phone . К сожалению, Internet Explorer не предлагает вам возможность эмулировать Android-смартфоны, iPhone и iPad.
Когда вы закончите, нажмите кнопку X (Закрыть) в правом верхнем углу инструментов разработчика, чтобы вернуться к просмотру на рабочем столе.
На каких сайтах вам нужно эмулировать мобильное устройство?
Теперь вы знаете, как эмулировать все виды мобильных устройств в вашем любимом веб-браузере. Прежде чем закрыть это руководство, сообщите нам, какие веб-сайты вам нужны для использования этой функции эмуляции. Нам очень любопытно. Это (в) знаменитый Instagram или какой-то другой мобильный сайт?
Как включить не отслеживать (dnt) в Chrome, Firefox, Edge, Opera и Internet Explorer
Что такое «Не отслеживать» (DNT)? Как это работает в вашем веб-браузере? Как включить DNT во всех основных веб-браузерах: Google Chrome, Mozilla Firefox, Microsoft Edge, Opera и Internet Explorer.
Как жестко обновить страницы в вашем браузере, на Mac (Safari, Chrome, Firefox и Opera)
Что такое CTRL F5 на Mac? Как вам сложно перезагрузить или жестко свежие веб-страницы на Mac. Это руководство работает для Safari, Chrome, Firefox и Opera для macOS.
На сегодняшний день тестирование страниц становиться непростой задачей. Времена, когда проверка работоспособности сайта ограничивалась парой браузеров, давно прошли.
Сегодня ваше творение необходимо тщательно проверять в целом диапазоне мобильных телефонов, планшетов и настольных систем с различными операционными системами, разрешениями экранов и возможностями. В особо серьезных случаях процесс тестирования может занять столько же времени, сколько и разработка проекта.
Процесс тестирования также усложняется благодаря устройствам с сенсорным экраном и мониторов с высоким разрешением. Если вы ведете разработку проекта на обычном PC с помощью таких же обычных мыши и клавиатуры, то вам будет трудно оценить работоспособность вашего кода в реальных условиях (на всех вышеперечисленных устройствах). Такая возможность, как событие мыши hover может не работать и ваше приложение становиться неработоспособным. Но тогда каким же образом можно протестировать программу и избежать при этом необходимости переключения между различными устройствами?
К счастью, сегодня выход из этой ситуации есть. В браузер Chrome версии 32 был добавлен режим эмуляции. С помощью него можно решить многие вышеназванные проблемы, не покидая комфортного окружения PC.
Запустите установленный Chrome, откройте в нем страницу, которую хотите протестировать и откройте Developer Tools (Menu - Tools - Developer Tools, Cmd+Opt+I на Mac или F12/Ctrl+Shift+I под Windows и Linux). Кликните мышью на значке-шестеренке Settings в правом верхнем углу окна браузера, затем откройте раздел Overrides для того, чтобы включить показ эмуляции в браузере - Show Emulation view in console drawer (в версии 33 эта возможность активирована по умолчанию):
Закрываем окно Settings и открываем “Console Drawer” (это не тоже самое, что общая “Console”) - для этого кликаем мышью на иконке (расположенной слева от иконки Settings) или нажав клавишу Esc . У вас должна открыться вкладка Emulate в “Console Drawer” (если этого не произошло, перезапустите браузер Chrome):
Режим эмуляции - раздел Device
Раздел Device предоставляет несколько дюжин готовых предустановок для большинства популярных мобильных устройств, включая iPhone, iPad, Kindles, планшеты Nexus, смартфоны Samsung Galaxy и т. д. Выбор одного из устройств приводит к изменениям настроек в остальных разделах.
Выбираем из списка нужное устройство и жмем кнопочку “Emulate” внизу этого списка:
Обратите внимание! Инструкция, представленная выше, описывает включение режима эмуляции в стабильной версии v.32 браузера Chrome. Если вы используете последнюю версию браузера Chrome Canary, эта опция будет располагаться в разделе “Settings” во вкладке “General” под вкладкой “Appearance”. (прим. переводчика: кто не знает, браузер Chrome Canary - это самая свежая и нестабильная версия браузера Chrome.)
Режим эмуляции - раздел Screen
В разделе Screen можно самостоятельно установить настройки экрана эмулируемого устройства:
- Resolution - произвольный размер экрана устройства
- Device pixel ratio - то есть для дисплеев Retina от Apple нужно ставит 2, чтобы производилось удваивание размера объектов в области просмотра
- font-scaling factor (прим. переводчика: неизвестный для меня параметр)
Режим эмуляции - раздел User Agent
В этом разделе настраивается режим агента пользователя. То есть, устанавливается модель взаимодействия между эмулируемыми клиентом и сервером:
Режим эмуляции - раздел Sensors
В этом разделе настраивается режим эмуляции сенсорного экрана:
В режиме эмуляции сенсорного экрана курсор мыши приобретает вид отпечатка пальца на экране устройства:
Эмуляция multi-touch может быть выполнена при помощи зажатой клавиши Shift и движения мыши в нужную сторону. Этот режим задействует соответствующие JavaScript-события, такие как touchstart , touchend , touchmove . Также делается попытка полностью соответствовать мобильным браузерам благодаря реализации JavaScript-события mouseover , но это событие возникает только тогда, когда будет произведено “нажатие” на элемент интерфейса. Эмулятор корректно игнорирует событие mouseover , возникающее, когда курсор сенсорного устройства просто движется поверх элемента интерфейса.
Возвращение браузера в обычный режим
Для того, чтобы завершить режим эмуляции и возвратиться в обычный режим просмотра, нужно перейти обратно в раздел Device и нажать кнопку Reset .
Мне больше не нужны устройства
Рассмотренный выше эмулятор браузера Chrome является полезным инструментом, но он не может в точности реализовать поведение настоящих устройств с сенсорным экраном, во всех их тонкостях.
Стоит также обратить внимание, что эмулятор несовершенен в следующих вопросах:
- вы можете столкнуть с некоторыми необъяснимыми ошибками в работе эмулятора
- CSS-событие :hover все еще в действии и
- для него нет механизма эмуляции; страница будет сгенерирована браузером Chrome вне зависимости от того, все ли устройства поддерживают возможности, заложенные в ней
Будем надеяться, что команда Google обратит внимание на эти недостатки и исправит их в последующих релизах.
Если подвести итог, то можно сказать, что режим эмуляции в браузере Google Chrome является простым и быстрым способом протестировать страницу, без необходимости проверки на реальных устройствах, таких как смартфоны или планшеты. Кроме того, у вас есть полный набор инструментов разработчика, что может сэкономить несколько часов вашего труда.
От переводчика
Хочется от себя немного добавить в эту тему. В книге Б. Фрейна “HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств” автор приводит краткий список плагинов для тестирования страниц в различных браузерах. Эти плагины не такие “продвинутые”, как режим эмуляции в браузере Chrome. Их задача сводиться только к одному - проверке работоспособности страниц на экранах различных устройств, с разными размерами области просмотра. Цель такой проверки - создание полностью рабочего адаптивного дизайна сайта.
Для браузера Safari автор рекомендует расширение Resize или ResizeMe. Под браузер Mozilla Firefox имеется плагин Firesizer. А под браузер Google Chrome автором рекомендуется использовать расширение Windows Resizer.
Например, после установки и активизации расширения Windows Resizer под Chrome при щелчке мыши на иконке появиться окно с предустановленными размерами экранов устройств:
В дальнейших объяснениях работа с плагином не нуждается, как мне кажется.
TypeScript - размеченные объединения
> Пользовательское объединение типов - что это и как можно использоватьПомимо объединения **примитивных** типов данных (например):
Существуют сайты, функционал которых доступен в полном объеме только в десктопных браузерах, но бывает и наоборот, когда некоторые специфические функции сайта доступны только при открытии его в мобильных браузерах. А еще вы можете просто захотеть посмотреть, как будет выглядеть тот или иной сайт на экране мобильного телефона или планшета. В интернете имеются сервисы, которые «конвертируют» интерфейс сайтов в соответствии с их мобильными версиями.
Но ведь тоже самое можно сделать и в обычном десктопном браузере, включив в панели разработчика режим эмуляции. Давайте посмотрим, как воспользоваться им в 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 он называется «Реагирует») свой гаджет или добавьте его, выбрав/создав в списке устройств наиболее соответствующий вашей модели шаблон.
Работать в эмулируемых мобильных браузерах можно так же, как и в обычных десктопных обозревателях.
Ссылки, кнопки, меню и прочие интерактивные элементы должны нормально функционировать, но возможны и исключения: некоторые функции могут быть недоступны по причине аппаратных ограничений.
Читайте также: