Новости о браузере Firefox, и о Mozilla в частности. http://firefox-me.ru

Как посмотреть на сайт с разных устройств ? (планшеты, смартфоны, телефоны, декстопы)





5th Февраль 2017 ;)




Боитесь что ваш сайт будет выглядеть плохо на разных устройствах ?


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

  1. Специализированные сайты для просмотра сайта на разных устройствах
  2. Встроенные возможности современных браузеров

Специализированные сайты для просмотра сайтов в разном разрешении и на разных устройствах:

  1. https://www.browserstack.com/ (платный)
  2. http://deviceponsive.com/?url=http%3A%2F%2Ffirefox-me.ru
  3. http://ami.responsivedesign.is/?url=http://firefox-me.ru
  4. http://beta.screenqueri.es/
  5. http://quirktools.com/screenfly/#u=http%3A//firefox-me.ru&w=1024&h=600




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

http://lab.maltewassermann.com/viewport-resizer/ — скрипт, букмарклет

https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh Расширение для Chrome

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

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

Но !

Мы-то с вами находимся на блоге http://firefox-me.ru , и блог наш о браузере Firefox. Поэтому давайте рассмотрим возможности Firefox для проверки адаптивного дизайна на разных девайсах.
Зайдем на сайт Firefox и нажмем F12.

Дальше найдите и нажмите значек мобильного устройства:

Дальше вы увидите интерфейс разработанный Mozilla специально для проверки адаптивного дизайна. Можете снова нажать на F12 что бы убрать Панель для разработчиков.

Что мы имеем ?

  1. 1. Быстро выйти из режима адаптивного дизайна
  2. 2. Изменить разрешение и создать свой пресет
  3. 3. Повернуть устройство
  4. 4. Симулировать событие прикосновения
  5. 5. Сделать Скриншот
  6. 6. Изменить UserAgent
  7. 7. Менять размеры окна

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

Достаточно ли этой функциональности ?

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

Всего вам хорошего.








Введите ваш email:

Сегодня: 2017.08.21
jAntivirus