New Post has been published on Просто пар
New Post has been published on http://prostopar.ru/emulyatsiya-mobilnyh-ustrojstv-v-google-chrome/
Эмуляция мобильных устройств в Google Chrome
Совместимость со всевозможными мобильными телефонами и планшетами последнее время преследует меня по пятам. Несколько раз уже приходилось переделывать готовые проекты, поскольку заказчик решил посмотреть свой сайт на подвернувшимся ему некстати планшетом. Отсюда моя заинтересованность в bootstrap и 960grid. Как выяснилось, в Хроме в режиме разработчика есть волшебная кнопочка.(Или CTRL-Shift-M для ускоренных). Что можно эмулировать и видеть:
проверять responsive на всевозможных разрешениях, ландшафтном и портретном режимах, включая Retina
смотреть, как приложение работает в сети
смотреть, как работают media queries
эмулировать события touch, geolocation и ориентацию устройства
совмещать всё вышеперечисленное с режимом разработчика
Для Ретины ставим Device pixel ratio в 2, для всех остальных — 1.
Что может встретиться для Ретины в сети — @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) … , image-set, srcset в картинках, свойство window.devicePixelRatio.
Сохранение пресета выполняется при нажатии кнопки в правом верхнем углу. Шорткат — Esc
Эмуляция различных сетей осуществляется в меню выбора сети. Проблем не вызывает, всё понятно.
Просмотр в прямом эфире media queries — вот эта кнопка. Экраны от максимального до минимального помечены разными цветами. Правый клик по полоске открывает правило в css.
Удобнее пока ничего не видел. Идем дальше.
Можно смотреть и в режиме print. Тоже полезно.
Дальше идут сенсоры и геолокация. Так далеко я пока не зашел, не было заданий. Разобраться там несложно тоже.
Поддерживаются события touchstart, touchmove и touchend.
С шифтом эмулируется pinch. Надо проверить, что это такое, я туповат.
Много еще чего эмулируется и можно всё это проверить с сайтами html5rocks, html5demos. У меня лично сползла крыша от новых фич и я угасаю. Пока займусь версткой и гридами. Много воды утекло с тех пор, как я начал верстать дивами, но, похоже, теперь надо верстать гридами уже. И пользовать мобильный эмулятор от Гугла.
