Просмотров: 4 971

Как тестировать отображние веб-страниц на мобильных устройствах.

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

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

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

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

1 способ (основной). Консоль браузера.

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

//webgyry.info/console-browser-start

С помощью консоли можно очень легко и удобно производить тестирование веб-страниц на мобильных.

Лично я пользуюсь Яндекс.Браузером и покажу, как работать на нем. В браузере Chrome и др. все аналогично.

Итак, чтобы запустить консоль жмем сочетание клавиш «Ctrl + Shift + I». Чтобы теперь перейти в режим тестирования мобильных устройств, жмем на соответствующую иконку на панели инструментов.

2016-02-14 11-15-37 Как запустить консоль в большинстве браузеров. – Yandex

Ваш сайт откроется примерно в таком окне с боковыми линейками по бокам.

В выпадающем списке вы можете выбрать то устройство, на которым нужно оттестировать сайт.

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

2016-02-14 11-16-03 Как запустить консоль в большинстве браузеров. – Yandex

Все просто, бесплатно и изящно.

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

2016-02-14 11-19-52 Проверка удобства просмотра на мобильных устройствах – Yandex

https://www.google.com/webmasters/tools/mobile-friendly/?hl=ru

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

Попробуйте.

Успехов!