Как использовать режим эмуляции мобильных устройств в Chrome


Оглавление (нажмите, чтобы открыть):

Как с помощью Google Chrome браузера эмулировать характеристики сетевого подключения?

Сегодня речь пойдет о новом инструменте Интернет браузера Google Chrome, который называется Chrome DevTools network emulator.

Chrome DevTools network emulator

Начнем с того что данный инструмент может пригодится для тестирования того как сайт или медиа-плеер будет себя вести при той или иной скорости подключения компьютера или в той или иной сети, например, GPRS/2G/3G/4G/DSL/WiFi .

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

Для того чтобы увидеть интерфейс DevTools network emulator необходимо зайти в настройки браузера Google Chrome и далее, Дополнительные инструменты -> Инструменты разработчика. Вызвать страницу с Инструментами разработчика также можно комбинацией клавиш «Ctrl + Shift + I».

Далее, нажимаем на надпись No throttling и выбираем необходимый профиль с параметрами. После выбора профиля он тут же будет применен для открытой страницы браузера.

Для того чтобы создать свой собственный профиль необходимо выбрать Custom -> Add…

Отмечу, что данные инструменты могут пригодиться всем тем кто организует видео-вещание, проверяет работу медиа-серверов и протоколов адаптивного стримнга (HLS, MPEG-DASH).

Всего хорошего!

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

Frontender Magazine

Примечание: Изначально эта статья была написанна для HTML5Experts.jp на японском языке, как часть спец-выпуска Google I/O. Этот пост является сокращенной версией оригинальной статьи, которая использует более актуальные (переведенные) цитаты из Google I/O.

Режим эмуляции устройств

В прошлом месяце на Google I/O, Паул Бакаус (Paul Bakaus) представил набор абсолютно новых (и все еще экспериментальных) инструментов: Device Mode для Chrome DevTools. В данный момент эта функция доступна в версии Сhrome Canary (v38 и выше).

Режим эмуляции устройств включает набор информации о гаджете, включая ширину экрана, высоту и соотношение плотности пикселей для популярных устройств, таких как серия Galaxy от Samsung и Nexus 5, упрощая для нас разработку отзывчивых веб-страниц.

Инструмент для построения медиа выражений

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

Но самое полезное, из того, что я обнаружила в режиме эмуляции устройств это медиа выражения. Нажав на похожую на ступеньки иконку слева от списка устройств (в виде ступеней), вы получите визуально представление всех медиа выражений использованных на странице. Нажав на одной из полосок правой кнопкой в меню можно выбрать “Reveal In Source Code” и в выпадающем списке выбрать путь к каждой области, где применяется данный код CSS.

С новой функцией, которая называется Workspace, вы можете на лету изменять медиа выражения в DevTools.

Соединение

Также новые инструменты пополнились эмуляцией сетевого соединения. Рядом с меню для выбора устройств есть выпадающий список где можно выбрать эмуляцию, к примеру, мобильной сети 3G или EDGE, что значительно облегчает проверку производительности.

Удаленная отладка с помощью скринкаста

Есть новое приложения для выбора режима устройств — улучшенная функция скринкаста. Эта запутанная функция была представлена в DevTools немного ранее, но обновленная и её улучшенная версия включена в Canary в качестве экспериментального инструмента.

Новый скринкаст входит в Canary build 38.0.2101.0 или новее.

Для использования нужно включить его в DevTools Experiments chrome://flags/#enable-devtools-experiments . После этого открыть DevTools и нажать на иконку шестерни, чтобы в ручном режиме разрешить функцию скринкаста.

Кроме того, нужно будет активировать режим отладки через USB на Android устройстве.

Как только вы подсоедините устройство к десктопу через USB, вы должны заметить маленькую иконку с номером “1”, которая отображает количество подключенных девайсов. Нажмите на кнопку “Try Here” чтобы открыть окно скринкаста.

Введенный URL в DevTools будет также отображаться на вашем устройстве. Ваш гаджет должен запустить веб страницу в Chrome. Теперь вы сможете просматривать страницу на обеих устройствах. Нажав на закладку “Layers” вы увидите визуализацию слоев DOM где можно оценить рендеринг и прорисовку. Можно определить проблемные места прорисовки с помощью инструмента Paint Profiler!

Печеньки

Вот список новых функций DevTools для мобильной разработки:

  • Расширенное отображение медиа выражений
  • Фильтрация стилей
  • Редактирование медиа выражений
  • Строчная эмуляция
  • Настройки самых популярных устройств
  • Эмуляция широкой видимой области
  • Эмуляция сенсоров (прикосновения, геолокации, акселометра)
  • Сетевые фильтры и режим без доступа к сети
  • Автоматическая настройка и подключение
  • Уже существовавшие но еще более мощные функции
  • Скринкаст
  • Перенаправление портов

Я в восторге от новых функций и надеюсь они будут доведены до совершенства и выпущенны в финальной версии Chrome. Команда Chrome, так держать!

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

DevTools в современных браузерах позволяет переключиться в адаптивный режим и весьма неплохо справляется со своей задачей. Но иногда случается так, что где-то что-то на мобильном выглядит не так, как на десктопе. В таких случаях понять в чём дело, а не тыкать пальцем в небо, поможет инспектирование элементов прямо на мобильном. Рассмотрим варианты для Chrome и Firefox. Для начала, независимо от браузера, нужно подготовить устройства и установить драйвера.

  1. Скачиваем и устанавливаем ADB-драйвера для своего телефона. Драйвера можно взять либо с сайта Android, либо на форуме 4pda.ru.
  2. Включаем на телефоне режим отладки. Для этого в настройках переходим в меню разработчика. Если его нет — переходим в раздел «О телефоне» и кликаем несколько раз по пункту «Номер сборки». У меня режим разработчика уже включён, поэтому отображается соответствующее сообщение. Затем в самом меню, наверху, активируем режим, находим пункт «Режим отладки» и активируем его тоже.

На этом общие моменты завершены. Теперь посмотрим как подключать телефон и как инспектировать элементы сайта на мобильном.

Инструкция для Google Chrome

Для отладки в Chrome, на компьютере должен быть установлен браузер версии не ниже 32, а на версия Android должна быть минимум 4.

  1. Открываем инструменты разработчика в браузере. Кликаем по трём точкам в правом верхнем углу. Выбираем «More tools», затем «Inspect devices…»
  2. Ставим галочку «Discover USB devices».
  3. Запускаем Chrome на телефоне и подключаем его к компьютеру. Появится запрос на подключение. Жмём «Ок».
  4. Видим слева своё устройство и его статус. Кликаем по нему.
  5. Отображается список открытых вкладок. Можно открыть новую, введя адрес в поле сверху. Нажав на три точки, можем перезагрузить вкладку, перейти на неё или закрыть её. Нажав «Inspect», как несложно догадаться, активируем инспектор.
  6. Видим экран мобильного на компьютере. Все изменения стилей отображаются на экране компьютера и на самом смартфоне в режиме реального времени. Если изменить ориентацию телефона — изменится и на компьютере.

Инструкция для Mozilla Firefox

На Firefox подобное сработает только на версии новее 36.

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

Бонус: отладка сайтов по WiFi

Работает пока, к сожалению, только на Firefox и только на версиях от 39 и выше. Чтобы всё сработало, компьютер и телефон должны быть подключены к одной сети. Плюс к этому, на телефоне должен быть установлен сканер QR-кодов. Firefox рекомендует этот. Другие, к слову, Firefox у меня не распознал и упорно твердил, что программа-сканер не установлена.

  1. Снова переходим в WebIDE, но на этот раз выбираем WiFi устройства.
  2. Появится QR-код для сканирования.
  3. На телефоне появится запрос. Нажимаем «сканировать» и сканируем код.
  4. Всё!

Сервисы просмотра сайта на разных разрешениях экрана. Эмуляция разрешения экрана в хроме

Режим эмуляции мобильных устройств в Chrome – Zencoder

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

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

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

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

Первое, что необходимо сделать, это заполучить сам браузер Chrome v.32. Если последние шесть лет вы жили на обратной стороне Луны, то тогда вы можете сделать это по ссылке google.com/chrome.

Запустите установленный 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-события, такие как , , . Также делается попытка полностью соответствовать мобильным браузерам благодаря реализации JavaScript-события , но это событие возникает только тогда, когда будет произведено “нажатие” на элемент интерфейса. Эмулятор корректно игнорирует событие , возникающее, когда курсор сенсорного устройства просто движется поверх элемента интерфейса.

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

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

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

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

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

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

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

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

Автор статьи: Craig Buckler, How to Use Mobile Emulation Mode in Chrome

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

Хочется от себя немного добавить в эту тему. В книге Б. Фрейна “HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств” автор приводит краткий список плагинов для тестирования страниц в различных браузерах. Эти плагины не такие “продвинутые”, как режим эмуляции в браузере Chrome. Их задача сводиться только к одному — проверке работоспособности страниц на экранах различных устройств, с разными размерами области просмотра. Цель такой проверки — создание полностью рабочего адаптивного дизайна сайта.

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

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

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

Чем тестировать адаптивный дизайн? / Хабр

Хватит менять размер окна браузера, хватит его насиловать! Готов спорить, вы не раз слышали это. Хорошо, возможно и не слышали. Но если вы профессионально занимаетесь разработкой адаптивных сайтов, вы понимаете о чем я: любое изменение DOM или правка CSS, и вы снова начинаете тянуть край браузера вперед, назад, тестируя изменения и просматривая ничего ли не сломалось.

Целью ваших движений является имитация экранов различных устройств.

В корпоративной среде зачастую, у вас есть множество гаджетов предоставленных компанией для теста. На моей работе в моем распоряжении есть iPad, iPod, другие планшеты, ноутбуки, а также настольные мониторы. Если у вас нет такой роскоши, приходится использовать то, что под рукой.


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

Для тестирования я выбрал реально адаптивный сайт PajamasOnYourFeet.com, сайт построено на основе HTML5 шаблона, бесплатно предоставленным EGrappler.

Am I Responsive?
  • настольный монитор — 1600 x 992px;
  • ноутбук — 1280 x 802px;
  • планшет — 768 x 1024px;
  • мобильный телефон — 320 x 480px.

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

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

deviceponsive

Устройства и доступные разрешения экранов.

  • Macbook — 1280 x 800
  • iPad портрет — 768 x 1024
  • iPad портрет — 1024 x 768
  • Kindle портрет — 600 x 1024
  • Kindle альбомная ориентация — 1024 x 600
  • iPhone портрет — 320 x 480
  • iPhone альбомная ориентация — 480 x 320
  • Galaxy портрет — 240 x 320
  • Galaxy альбомная ориентация — 320 x 240

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

responsive test

30 различных разрешений доступно на сайте, начиная от огромного настольного монитора, до того, что они называют «дрянный андроид» (справедливости стоит заметить, что есть и нормальный андроид).

Что касается браузера Firefox, то он немного не корректно работает с данным сайтом. Обратите внимание, что на скриншоте не отображается слайдер между зеленым заголовком и белой областью фонового содержания.

responsive.is

Доступные варианты устройств — авто (то как вы видите сайт), настольный комьютер, планшет в альбомной и портретной ориентации, смартфон в портретной и альбомном положении. Задавать произвольные размеры в px, к сожалению нельзя.

Screenqueries

Интересной особенностью этого сайта, для ряда устройств есть “Trueview” вариант, который показывает ваш сайт в нативном браузере устройства.

К сожалению, Firefox и тут не смог отобразить слайдер. Не нужно обвинять меня, Firefox мой любимый браузер, но такие вот дела.

Screenfly

У каждого устройства в меню указано размер экрана в px., а также в правом верхнем углу отображается фактический размер вашего окна браузера.

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

Используете ли вы представленные инструменты в своей практике? Делитесь своими секретами разработки адаптивных сайтов в комментариях.

P.S. Ошибки по поводу перевода просьба сообщать в личку.

Как сделать сайт адаптивным с помощью Google Chrome

Действительно ли Ваш сайт совместим с мобильными устройствами? Действительно ли он адаптивный? По данным eMarketer, ожидается, что этом году будет более 1.75 пользователей смартфона. К 2020 пользование мобильными телефонами во всем мире возрастет до 69.4% от общего количества населения.

Наверняка Вы слышали такие высказывания как: Интернет повсюду; в следующем году в Интернет будут выходить только с мобильных устройств; стационарные компьютеры идут путем динозавров и так далее.

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

Проблемы возникают когда дело доходит до горизонтальной ориентации, так как ее нет для мобильных устройств. Вместе с представленными iPhone 6 и 6 Plus, мы получаем 46 конкурирующих между собой устройств, со своим видением и возможностями. Вдобавок, сетевая скорость с которой нужно правильно иметь дело.

Если работая за стационарным компьютером Вам нужно думать только о скорости Wifi или DSL,то в случае с мобильными устройствами другие скорости, называемые GPRS, EDGE, 3G и LTE (4G).

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

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

Мобильная эмуляция в Google Chrome

В новом Chrome 32 есть инструмент разработки – мобильная эмуляция. Этот инструмент – настоящая находка для отладки мобильных и адаптивных проектов.

Если Вы его еще не открыли, то откройте с помощью одной из следующих опций:

  • Нажмите F12 (или Cmd+Alt+l на Mac)
  • Кликните Developer Tools под View -> Developer
  • Кликните правой кнопкой мыши в любой части сайта и выберите Inspect Element

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

Вы можете увидеть, что доступны обычные инструменты разработчика, но есть еще дополнительные опции, и сайт будет имитировать мобильное устройство, в том случае iPhone 6 Plus. Давайте рассмотрим его поближе.

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

– вертикальное/горизонтальное положение экрана;

– установка пиксельного соотношения устройства;

– возможность регулировки дисплея в пределах видимой части или полноразмерного режима.

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

Под «сетью» Вы можете вручную настроить агент пользователя. Это позволит Вам увидеть насколько сайт адаптивный.

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

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

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

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

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

Расширение Usersnap Chrome красиво вписывается в список инструментов разработчика. Используя плагин эмуляции Вы можете применить Usersnap Widget в дизайне.

Если у Вас его еще нет, установите его с сайта Chrome Web Store. После установки, Вы увидите иконку Usersnap в тулбаре Chrome. После первого использования появится указание о конфигурации.

Кликните «ок» и после регистрации и логина в Usersnap, Вы будете перенесены на страничку конфигураций. В нижней части страницы Вы увидите список Ваших проектов.

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

Надеемся в скором времени это будет устранено.

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

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

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

google-chrome — Можно ли эмулировать ориентацию в браузере?

Я уверен, что другие выяснили, как эмулировать ориентацию в Chrome к настоящему времени, но я столкнулся с этим сообщением и хотел добавить инструкции для тех, кто все еще ищет помощь.

Это на самом деле довольно просто.

Эти инструкции являются текущими как

В Chrome Dev Tools (внутри Chrome, нажмите F12, чтобы открыть Chrome Dev Tools) перейдите на вкладку «Эмуляция» . Выберите устройство, которое вы хотите эмулировать из выпадающего списка, и нажмите «Эмуляция» . Когда вы эмулируете, раздел «Экран», который находится в списке разделенных разделов слева от вкладки «Эмуляция» , получает галочку, указывающую, что она активна. Выберите его.

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

Некоторые другие важные вещи, которые вы можете сделать в эмуляторе Chrome Dev Tools

  • Эмуляция коэффициента пикселя устройства
  • Эмуляция типов носителей CSS (шрифт Брайля, рельефный, ручной, печать, проекция, экран, речь, tty, tv: см. RFC 2534 и соответствующие документы для более подробной информации)
  • Пользовательский агент Spoof: вы можете заставить Chrome «олицетворять» другие браузерные механизмы.
  • Эмуляция сенсорного экрана (это не идеально, но это приятное прикосновение ( qaru.site

Как использовать функцию эмуляции устрйств браузера Google Chrome

Из этого туториала Вы узнаете, как использовать функцию эмуляции устройств браузера Google Chrome (Google Chrome Device Emulation). Эта функция поможет вам протестировать адаптивный дизайн вашего сайта путём имитации разных размеров и разрешений экрана.

Как использовать функцию эмуляции устройств браузера Google Chrome

Для того чтобы активировать Режим устройства

Откройте ваш сайт, используя браузер Google Chrome.

Нажмите на кнопку F12, для того чтобы получить доступ к Инструментам разработчика Chrome (Chrome DevTools).

Включите режим устройства, нажав на значок Переключение в режим устройства (Toggle device mode). Когда режим устройства включен, значок становится синим (blue) и режим отображения переключается на эмуляцию устройства:

Вы можете также включить/отключить (on/off) этот режим, используя сочетание клавиш:

Ctrl+Shift+M (или Cmd+Shift+M на Mac).

Использование Эмуляции экрана:

Эмуляция экрана поможет Вам проверить адаптивность (test the responsiveness) вашего сайта. Вы найдёте множество заранее установленных режимов эмуляции.

Выберите модель (Select a model) из выпадающего списка заранее установленных режимов, для того чтобы эмулировать определённое устройство:

Каждый заранее установленный режим автоматически настраивает параметры эмуляции (такие как разрешение экрана устройства (device resolution) и Пиксельное соотношение (pixel ratio), а также включает эмуляцию сэнсорного экрана (touch emulation) и т. д.).

Переключайтесь между книжным (portrait) и альбомным (landscape) видом, нажав значок «Изменить размеры». Выберите кнопку «Соответствовать размеру экрана», для того чтобы убедиться, что экран устройства, которое эмулируется, остается полностью видимым внутри окна браузера:

Для того чтобы эмулировать пользовательский размер экрана (custom screen size), задайте разрешение экрана устройства в пикселях в полях ширина (width) и высота (height):

Для того чтобы работать с медиа-запросами:

Благодаря Режиму устройства легко исследовать действие медиа-запросов.

Для того чтобы включить инструмент работы с медиа-запросами, нажмите на значок ‘Медиа-запросы’ (Media queries) в верхнем левом углу окна. Инструменты разработчика (DevTools) найдут медиа-запросы в вашем файле стилей и отобразят их как цветные полосы в верхней части окна:

Медиа-запросам соответствуют такие цвета:

Синий: Запросы для максимальной ширины экрана;

Зелёный: Запросы для определённого диапазона значений ширины экрана;

Оранжевый: Запросы для минимальной ширины экрана.

Для того чтобы предварительно просмотреть стили для определённого разрешения экрана (preview screen styles), нажмите на панель медиа-запросов (media query bar), для того чтобы настроить разрешение окна эмулятора и предварительно просмотреть стили (preview styles) для нужного диапазона размеров экрана:

Нажмите правой кнопкой мышки на панель, для того чтобы найти, в каком месте дается определение медиа-запроса (view where the media query is defined) в CSS и перейти к этому определению (jump to the definition) в исходном коде:

Для того чтобы отключить (turn off) эмуляцию мобильных устройств, не покидая Режим устройства, нажмите на значок ‘Сбросить все переопределения’ (Reset all overrides) и обновите страницу:

Вы можете даже изменить Операционную систему (Operation System) мобильного устройства.

Откройте панель Инструментов разработчика, нажав на значок ‘Больше переопределений’ (More overrides) в правом верхнем углу окна браузера. Затем, выберите ‘Сеть’ (Network) в окне, которое откроется:

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

Как использовать функцию эмуляции устройств браузера Google Chrome

Проверка сайта на разных разрешениях экрана

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

Для чего это может пригодиться?

Например, по статистике своего сайта можно проанализировать, — какие разрешения экрана и в каком процентном отношении используют посетители Вашего сайта:

Затем можно посмотреть, как отображается Ваш сайт на устройствах с данными разрешениями. Если Вам разработали/разрабатывают адаптивную версию сайта, — то, посмотрев, как выглядит сайт в разных разрешениях, — можно обсудить с разработчиком какие-то детали.

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

Как посмотреть сайт на разных разрешениях экрана


Есть много способов, чтобы сделать просмотр сайта в разных разрешениях экрана. Так, например, основные разрешения экранов для сайта можно было бы посмотреть вообще простыми средствами Windows, изменив разрешение экрана в разделе Настройки экрана:

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

Проверка сайта в браузере. Разрешение экрана

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

Появляется дополнительная панель с кодами сайта, где для включения просмотра сайта в разных разрешениях нажимаем на специальную вкладку (1), как показано на снимке ниже.

Для выбора разных мобильных устройств используем выпадающее меню (2). Справа также указывает разрешения экрана на выбранном устройстве. Чтобы развернуть экран устройства, — пользуемся соответствующей кнопкой (3):

А более удобный способ проверки сайта на разных разрешениях экрана дают специальные онлайн сервисы.

Просмотр разрешения экрана сайта в Screenfly

Это один из самых удобных (при этом, — бесплатный) на текущий момент сервисов, с помощью которого можно быстро посмотреть сайт не только на основных, а вообще на разных разрешениях экрана!

Переходим в сервис Screenfly. Вводим в предлагаемое поле проверяемый сайт и получаем результат (прокомментирую под снимком):

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

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

Другие сервисы для проверки разрешения экрана сайта

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

Сервисы просмотра сайта на разных разрешениях экрана

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

Еще есть вариант с использованием плагинов для бразуера, например Web Developer для Firefox, который также сущесвтует и для Google Chrome. Опция Resize позволяет изменить размер браузера до нужного вам значения.

Методы эти наиболее простые, но сейчас их уже недостаточно — просмотреть сайт на разрешениях экрана побольше или увидеть как он будет смотреться с мобильного не получится. Помнится недавно я рассматривал проект CrossBrowserTesting, позволяющий тестировать сайты во всех браузерах. Он крайне полезен для проверки кроссбраузерной верстки на разных OS и браузерах, однако разрешений экрана там было не так много. К тому же для его использования нужно было регистрироваться. Сегодня рассмотрю парочку более простых и доступных сервисов для быстрого просмотра сайта на разных разрешениях экрана.

Сервисы просмотра сайта на разных разрешениях экрана

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

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

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

Кстати, под доменом quirktools.com скрывается еще парочка интересных простых сервисов:

  • Smaps — создание карт сайтов или просто иерархической схемы.
  • Wires — вот это классная штука, которая позволяет создавать макеты веб-страниц с помощью разных функциональный блоков (текста, табов, форм, кнопок и т.п.)

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

Весьма симпатичный дизайн у проекта.

Этот сервис похож на CrossBrowserTesting, поскольку дополнительно позволяет оценить ваш сайт на разных браузерах и ОС. Причем он также требует регистрацию и имеет платные функции. Хотя для просмотра разных разрешений экрана это не обязательно — переходите в пункт меню Responsive.

По дизайну и функциональности все очень круто сделано, чего только стоит возможность для смартфонов выбирать варианты просмотра Portrait и Landscape. Да, в остальных сервисах имеется функция поворота (Rotate), но, согласитесь, так все смотрится намного ярче. Кстати, если я правильно понял, то после регистрации вы сможете использовать опцию живого интерактивного тестирования в реальном времени.

Сервис в духе минимализма. Здесь есть поле для ввода названия сайта + возможность выбора размеров экрана для просмотра.

Еще один максимально простой проект. Кроме адреса сайта и размеров представлены наиболее популярные разрешения экрана для вашего удобства.

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

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

По данным статистического сервиса 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 с его интерфейсом и функционалом.

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

Simulate Mobile Devices with Device Mode in Chrome DevTools

Use Device Mode to approximate how your page looks and performs on a mobile device.

Device Mode is the name for the loose collection of features in Chrome DevTools that help you simulate mobile devices. These features include:

Limitations

Think of Device Mode as a first-order approximation of how your page looks and feels on a mobile device. With Device Mode you don’t actually run your code on a mobile device. You simulate the mobile user experience from your laptop or desktop.

There are some aspects of mobile devices that DevTools will never be able to simulate. For example, the architecture of mobile CPUs is very different than the architecture of laptop or desktop CPUs. When in doubt, your best bet is to actually run your page on a mobile device. Use Remote Debugging to view, change, debug, and profile a page’s code from your laptop or desktop while it actually runs on a mobile device.

Simulate a mobile viewport

Click Toggle Device Toolbar to open the UI that enables you to simulate a mobile viewport.

Figure 1. The Device Toolbar

By default the Device Toolbar opens in Responsive Viewport Mode.

Responsive Viewport Mode

Drag the handles to resize the viewport to whatever dimensions you need. Or, enter specific values in the w >628 and the height is set to 662 .

Figure 2. The handles for changing the viewport’s dimensions when in Responsive Viewport Mode

Show media queries

To show media query breakpoints above your viewport, click More options and then select Show media queries.

Figure 3. Show media queries

Click a breakpoint to change the viewport’s width so that the breakpoint gets triggered.

Figure 4. Click a breakpoint to change the viewport’s width

Set the device type

Use the Device Type list to simulate a mobile device or desktop device.

Figure 5. The Device Type list

The table below describes the differences between the options. Rendering method refers to whether Chrome renders the page as a mobile or desktop viewport. Cursor icon refers to what type of cursor you see when you hover over the page. Events fired refers to whether the page fires touch or click events when you interact with the page.

Option Rendering method Cursor icon Events fired
Mobile Mobile Circle touch
Mobile (no touch) Mobile Normal click
Desktop Desktop Normal click
Desktop (touch) Desktop Circle touch

Mobile Device Viewport Mode

To simulate the dimensions of a specific mobile device, select the device from the Device list.

Figure 6. The Device list

Rotate the viewport to landscape orientation

Click Rotate to rotate the viewport to landscape orientation.

Figure 7. Landscape orientation

Note that the Rotate button disappears if your Device Toolbar is narrow.

Figure 8. The Device Toolbar

Show device frame

When simulating the dimensions of a specific mobile device like an iPhone 6, open More options and then select Show device frame to show the physical device frame around the viewport.

Add a custom mobile device

To add a custom device:

Click the Device list and then select Edit.

Figure 11. Selecting Edit

Click Add custom device.

Enter a name, width, and height for the device. The device pixel ratio, user agent string, and device type fields are optional. The device type field is the list that is set to Mobile by default.

Figure 12. Creating a custom device

Show rulers

Click More options and then select Show rulers to see rulers above and to the left of your viewport. The sizing unit of the rulers is pixels.

Figure 13. Show rulers Figure 14. Rulers above and to the left of the viewport

Zoom the viewport

Use the Zoom list to zoom in or out.

Throttle the network and CPU


To throttle the network and CPU, select Mid-tier mobile or Low-end mobile from the Throttle list.

Figure 16. The Throttle list

Mid-tier mobile simulates fast 3G and throttles your CPU so that it is 4 times slower than normal. Low-end mobile simulates slow 3G and throttles your CPU 6 times slower than normal. Keep in mind that the throttling is relative to the normal capability of your laptop or desktop.

Note that the Throttle list will be hidden if your Device Toolbar is narrow.

Figure 17. The Device Toolbar

Throttle the CPU only

To throttle the CPU only and not the network, go to the Performance panel, click Capture Settings , and then select 4x slowdown or 6x slowdown from the CPU list.

Figure 18. The CPU list

Throttle the network only

To throttle the network only and not the CPU, go the Network panel and select Fast 3G or Slow 3G from the Throttle list.

Figure 19. The Throttle list

Or press Command + Shift + P (Mac) or Control + Shift + P (Windows, Linux, Chrome OS) to open the Command Menu, type 3G , and select Enable fast 3G throttling or Enable slow 3G throttling.

Figure 20. The Command Menu

You can also set network throttling from the Performance panel. Click Capture Settings and then select Fast 3G or Slow 3G from the Network list.

Figure 21. Setting network throttling from the Performance panel

Override geolocation

To open the geolocation overriding UI click Customize and control DevTools and then select More tools > Sensors.

Figure 22. Sensors

Or press Command + Shift + P (Mac) or Control + Shift + P (Windows, Linux, Chrome OS) to open the Command Menu, type Sensors , and then select Show Sensors.

Figure 23. Show Sensors

Select one of the presets from the Geolocation list, or select Custom location to enter your own coordinates, or select Location unavailable to test out how your page behaves when geolocation is in an error state.

Figure 24. Geolocation

Set orientation

To open the orientation UI click Customize and control DevTools and then select More tools > Sensors.

Figure 25. Sensors

Or press Command + Shift + P (Mac) or Control + Shift + P (Windows, Linux, Chrome OS) to open the Command Menu, type Sensors , and then select Show Sensors.

Figure 26. Show Sensors

Select one of the presets from the Orientation list or select Custom orientation to set your own alpha, beta, and gamma values.

Как сделать сайт адаптивным с помощью Google Chrome

Действительно ли Ваш сайт совместим с мобильными устройствами? Действительно ли он адаптивный? По данным eMarketer, ожидается, что этом году будет более 1.75 пользователей смартфона. К 2020 пользование мобильными телефонами во всем мире возрастет до 69.4% от общего количества населения.

Наверняка Вы слышали такие высказывания как: Интернет повсюду; в следующем году в Интернет будут выходить только с мобильных устройств; стационарные компьютеры идут путем динозавров и так далее.

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

Проблемы возникают когда дело доходит до горизонтальной ориентации, так как ее нет для мобильных устройств. Вместе с представленными iPhone 6 и 6 Plus, мы получаем 46 конкурирующих между собой устройств, со своим видением и возможностями. Вдобавок, сетевая скорость с которой нужно правильно иметь дело.

Если работая за стационарным компьютером Вам нужно думать только о скорости Wifi или DSL,то в случае с мобильными устройствами другие скорости, называемые GPRS, EDGE, 3G и LTE (4G).

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

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

Мобильная эмуляция в Google Chrome

В новом Chrome 32 есть инструмент разработки – мобильная эмуляция. Этот инструмент – настоящая находка для отладки мобильных и адаптивных проектов.

Если Вы его еще не открыли, то откройте с помощью одной из следующих опций:

  • Нажмите F12 (или Cmd+Alt+l на Mac)
  • Кликните Developer Tools под View -> Developer
  • Кликните правой кнопкой мыши в любой части сайта и выберите Inspect Element

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

Вы можете увидеть, что доступны обычные инструменты разработчика, но есть еще дополнительные опции, и сайт будет имитировать мобильное устройство, в том случае iPhone 6 Plus. Давайте рассмотрим его поближе.

Конфигурация девайса

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

– вертикальное/горизонтальное положение экрана;

– установка пиксельного соотношения устройства;

– возможность регулировки дисплея в пределах видимой части или полноразмерного режима.

Конфигурация сетей

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

Под «сетью» Вы можете вручную настроить агент пользователя. Это позволит Вам увидеть насколько сайт адаптивный.

Брейк-пойнт

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

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

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

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

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

Расширение Usersnap Chrome красиво вписывается в список инструментов разработчика. Используя плагин эмуляции Вы можете применить Usersnap Widget в дизайне.

Если у Вас его еще нет, установите его с сайта Chrome Web Store. После установки, Вы увидите иконку Usersnap в тулбаре Chrome. После первого использования появится указание о конфигурации.

Кликните «ок» и после регистрации и логина в Usersnap, Вы будете перенесены на страничку конфигураций. В нижней части страницы Вы увидите список Ваших проектов.

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

Надеемся в скором времени это будет устранено.

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

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

Заключение

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

7 советов по настройке и использованию мобильного Chrome

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

Переключайтесь между вкладками быстро

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

Синхронизируйте вкладки, пароли и закладки между устройствами

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

Для настройки синхронизации зайдите в «Настройки», затем тапните сверху по названию своей учётной записи, потом ещё раз по электронной почте и, наконец, расставьте флажки возле данных, которые хотите синхронизировать.

Экономьте трафик

Браузер Chrome для Android располагает функцией компрессии данных, которая может вам пригодиться при работе в роуминге или в условиях плохого соединения. Для её активации необходимо открыть настройки программы и нажать на пункт «Экономия трафика». В следующем окне включите сжатие с помощью переключателя сверху. Здесь же в последующем можно ознакомиться с графиком и числовыми показателями экономии.

Активируйте читательский режим

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

Здесь найдите настройку «Отображение значка „Режим чтения“ на панели инструментов» и активируйте её. После перезагрузки программы вы увидите новую кнопку, позволяющую очистить страницу от всего лишнего для удобного чтения. Обратите внимание, что эта кнопка отображается только на тех веб-страницах, на которых может быть использована.

Играйте во встроенную игру

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

Закрепите сайты на рабочем столе

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

Используйте голосовой ввод

Если вы хотите задать Google длинный вопрос, то на его набор с помощью клавиатуры уйдёт непозволительно много времени. Гораздо удобнее и быстрее использовать голосовой набор. Просто нажмите на иконку с микрофоном в строке поиска и продиктуйте свой запрос. Пользуйтесь этой функций всегда, когда это возможно.

Запустите приложение «Кордова», используя мобильную эмуляцию режима устройства Chrome

2 Frank [2015-07-16 14:21:00]

Я всегда использовал ripple для запуска моего приложения cordova в настольных браузерах. Но я знаю, что есть лучший инструмент для эмуляции мобильных приложений, и он интегрирован в хром: Chrome Device Mode Mobile Emulation .

Есть ли способ использовать Chrome Device Mode Mobile Emulation эмуляцию Chrome Device Mode Mobile Emulation вместо использования ripple для эмуляции моего приложения в хроме?

cordova emulation ripple

2 ответа

0 jonmc12 [2015-07-24 22:29:00]

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

Удаленная отладка Chrome проста и полезна для отслеживания или отладки сетевой ошибки в мобильном приложении. Просто выполните следующие действия.

До этого вам нужно добавить эти строки в файл src приложения (.java)

(Это позволит хром контролировать запуск веб-просмотра)

  1. Включить отладку USB на мобильном устройстве
  2. Подключите устройство к ПК.
  3. Откройте хром на ПК
  4. Перейдите в меню Chrome> Дополнительные инструменты> Inspect Devices.
  5. Установите флажок «Обнаружение устройств USB».
  6. Найдите свое приложение в списке
  7. Теперь вы можете просмотреть свое приложение до хрома.

Вот и все! Вы можете отлаживать свое приложение с хром.

Примечание: — Только для Android

Запустите приложение Cordova, используя эмуляцию мобильного устройства в режиме Chrome.

Я всегда использовал ripple для запуска моего приложения Cordova в настольных браузерах. Но я знаю, что есть лучший инструмент для эмуляции мобильных приложений, и он интегрирован в Chrome: Chrome Device Mode Mobile Emulation .

Есть ли способ использовать Chrome Device Mode Mobile Emulation эмуляцию в Chrome Device Mode Mobile Emulation вместо использования ripple для эмуляции моего приложения в Chrome?

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

Перед этим вы должны добавить эти строки в файл src вашего приложения (.java)

(Это позволит chrome отслеживать запущенный веб-просмотр)

  1. Включить отладку по USB на вашем мобильном
  2. Подключите ваше устройство к ПК.
  3. Откройте Chrome на вашем компьютере
  4. Перейдите в меню Chrome> Дополнительные инструменты> Проверка устройств.
  5. Установите флажок «Обнаружить USB-устройства»
  6. Найти заявку в списке
  7. Теперь вы можете показать свое приложение в Chrome.

Вот и все !! Вы можете отлаживать ваше приложение из Chrome.

Мастер Йода рекомендует:  15 JavaScript-библиотек для анимации SVG Javascript
Добавить комментарий