Главная Разное Где тестировать, как выглядит сайт на мобильных устройствах

Где тестировать, как выглядит сайт на мобильных устройствах

Автор: Novichok

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

Как анализировать источники трафика можно прочитать здесь.

Для проведения теста вам не понадобятся модели всех телефонов, в сети есть сайты-эмуляторы мобильных устройств. Они предоставляют возможность онлайн увидеть сайт на устройствах с различной диагональю дисплея, разным соотношением сторон и разрешением. Угодить всем пользователям, возможно не удастся. Но по статистике Яндекс Метрики можно выделить чаще всего использующиеся устройства и адаптировать сайт под них.

testirovat-sajt-pod-mobilnye-ustrojstva-5419375

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

Вот популярные сервисы для проверки:

quirktools.com/screenfly

Проверяем и видим, первый сайт не адаптирован, у второго шапка, контент адаптируются к области просмотра.

otobrazhenie-sajta-na-mobilnyx-ustrojstvax-4025728proverit-sajt-na-mobilnyx-ustrojstvax-3355965

Mobilephoneemulator.com

Пишем адрес сайта, задаем вид мобильного устройства, ориентацию экрана, проверяем результат.

mobilnaya-proverka-sajta-2865885

Гугловский инструмент http://developers.google.com/speed/pagespeed/insights/ проверит, адаптирован ли веб-ресурс и даст рекомендации, как улучшить работу сайта.

Инструмент Chrome Dev Tools работает в браузере Chrome, выполняя мобильную эмуляцию.

Откройте любую страницу, нажмите правую клавишу мыши => Просмотреть исходный код.

В левом углу нажмите на значок мобильного телефона.

proverka-sajta-na-mobilnyx-ustrojstvax-1475082

proverit-sajt-pod-mobilnye-ustrojstva-6766801

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

Аналогично можно проверять в браузере Mozilla Firefox, нажмите правую клавишу мыши => Исследовать элемент. Справа откроется окно, выберите знак Режим адаптивного дизайна, нажмите на него.

kak-vyglyadit-sajt-6699868

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

Выбирайте подходящий инструмент, чтобы проверить, как выглядит сайт на мобильных устройствах, выполняйте аудит во время процесса адаптирования.

полезные сервисы

You may also like