Как проверить адаптивность, используя браузер

Grammatic macht frei

Когда проект переходит к стадии тестирования, много клиентов интересуется, как самостоятельно проверить адаптивность сайта.

Очевидно, что самый надежный способ — попробовать попользоваться сайтом непосредственно на нужных устройствах. Именно так мы и делаем.

Но что делать, если в вашем распоряжении всего 2-3 девайса?

Все просто — зайти на сайт с обычного компьютера и использовать браузер.

P. S. Но ни в коем случае не вот так:

В рамках данной статьи предлагаю сосредоточить свое внимание на 2 браузерах — Google Chrome та Mozilla Firefox.

Google Chrome

1. Заходим на нужный сайт. Например, на www.otakoyi.com :)

2. Переходим в т. н. консоль браузера.

Для этого выполняем одно из 3 действий:

или Нажимаем на клавиатуре на клавишу F12 (не F+1+2, а именно F12 (разное бывало...)

или Ctrl+Shift+I

или Заходим в меню браузера, выбираем "Другие инструменты" и "Инструменты разработчика":

3. Перед нами в нижней части экрана появится вот такая штука. Это и есть консоль браузера:

4. В нижнем левом уголке этой панели кликаем на вооот такой значок мобильного устройства:

5. Перед вами появится замечательная панель с несколькими опциями:

6. В блоке “Device”, а именно — поле “Select model” выберите устройство, которое вас интересует. Например, возьмем Apple iPhone 4.

Что делать, если вы не нашли нужного устройства в списке? Все просто — укажите ниже параметры девайса вручную (здесь они в пикселях):

7. Теперь не помешает обновить страницу, нажав F5 на клавиатуре или вот эту круглую кнопочку в браузере, рядом с полем для ввода адреса сайта и стрелочками “вперед-назад”:

Вуаля! Теперь вы можете оценить, как будет выглядеть сайт при просмотре с выбранного устройства, в нашем примере — Apple iPhone 4:

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

Mozilla Firefox

1. Заходим на нужный сайт. Я снова на www.otakoyi.com, ну а куда же еще :)

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

или Ctrl+Shift+M

или Кликаем на значок “Гаечный ключ” (рядом с кнопками для изменения масштаба и строкой “Поиск”) в окне браузера:

3. В списке выбираем “Адаптивный дизайн”:

4. Теперь не помешает обновить страницу (как это делать — указано выше).

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