Совместимость со всевозможными мобильными телефонами и планшетами последнее время преследует меня по пятам. Несколько раз уже приходилось переделывать готовые проекты, поскольку заказчик решил посмотреть свой сайт на подвернувшимся ему некстати планшетом. Отсюда моя заинтересованность в 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. У меня лично сползла крыша от новых фич и я угасаю. Пока займусь версткой и гридами. Много воды утекло с тех пор, как я начал верстать дивами, но, похоже, теперь надо верстать гридами уже. И пользовать мобильный эмулятор от Гугла.
Эмуляция мобильных устройств в Google Chrome
Комментариев нет:
Отправить комментарий