Как выглядит сайт при различных разрешениях экрана. Сервисы просмотра

Воскресенье, Декабрь 3, 2017, 13:47 | В записную книжку, Интернет | 63 просм. | Нет комментариев

Засилье смартфонов и увеличение количества «вкусных» тарифов для пользователей мобильного Интернета приводит к тому, что на сайты все чаще заходят с мобильных телефонов, чем с десктопных компьютеров. Если сайт невозможно /трудно / неудобно просматривать на экране мобильного — это неизбежная потеря посетителей.

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

Существует несколько способов для просмотра сайта при различных разрешениях экрана. Самый простой — менять размер экрана браузера вручную и смотреть, что происходит. Однако этот способ следует признать неточным, приблизительным. Поэтому создано немало сервисов, которые позволяют эмулировать просмотр указанных URL-ов на различных устройствах. Для себя я разделила их на две группы.

Первая группа сервисов не сильно отличается от доморощенного: вы вручную вводите нужные значения разрешения экрана. Если вы заранее точно знаете, какие разрешения экрана вас интересуют, а также если вам необходим просмотр при произвольном значении, которого нет в списке устройств на других сайтах (ни один из них, естественно, не может предоставить полный список), то такие сервисы оптимальны для ваших нужд. Вот пример таких сайтов.

Responsivepx

Сайт Responsivepx.com

Вводите в поле URL страницы и с помощью ползунка меняете цифры ширины и высоты экрана.

Вторая группа сервисов имеет готовый набор эмуляторов мобильных устройств. Такие сервисы, в свою очередь, я тоже разделила на две группы. Первая позволяет сразу после указания ссылки посмотреть ее при различных разрешениях на одной странице. Здесь вас не заставляют выбирать вручную последовательно мобильные устройства. И хотя выбор разрешений при этом может быть невелик, он покрывает самые распространенные форматы, и незаменим, если вам нужно быстренько пробежаться по ним, не вдаваясь в подробности. Пример сервиса такого типа:

Mattkersley

Сайт Mattkersley.com

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

Infobyip

Сайт Infobyip.com

Выбор нужного разрешения осуществляется кликом по ссылке после ввода тестируемого URL. Для удобства у всех устройств указаны их разрешения. Впрочем, это удобство имеется у всех сервисов подобного типа.

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

Screenfly (сайт Quirktools.com)

Сервис Screenfly

Здесь больше наворотов, чем в предыдущих сервисах. Он объединяет все выше перечисленные возможности: просмотр страницы на экранах самых распространенных мобильников, планшетов, различных разрешений мониторов десктопных компьютеров, а также на телевизорах. Вручную выбрать разрешение, которого нет в списке, тоже можно — необходимый функционал находится под пятой кнопкой слева в меню. Еще здесь можно эмулировать вращение экрана, смотреть страницу при разрешенном и запрещенном скроллинге. Очень удобная примочка — кнопка Refresh: удобно, когда посмотрел, нашел ошибку, поменял что-то на странице — и нужно только нажать кнопочку, а не вводить URL заново. Фрейм со страницей размещен на рабочем столе с линейкой, так что всегда можно видеть, с каким разрешением экрана работаешь, на заглядывая в подсказку.

Просто один в один Скринфлаю еще один сервис —

Techiepool

Techiepool.com

Даже кнопки меню расположены почти в том же порядке, что и на Screenfly, так что подробно на нем останавливаться не будем, просто см. описание выше. Идем дальше.

Browserstack

Browserstack.com

Дизайнерская фишка: нужную вам страничку вы здесь можете посмотреть прямо в обрамлении мобильного устройства. В меню 13 видов устройств от мобильных до десктопных (Windows 7, 1280×1024, MacOSX Yosemite 1920×1080).

Схожим образом организован интерфейс на последнем из рассматриваемых сегодня сервисов —

Mobilephoneemulator

Mobilephoneemulator

Меню находится справа. Вводите URL в третий сверху блок меню, выбираете нужное устройство для просмотра. Причем сервис покажет вам все технические характеристики выбранного устройства а также укажет, какой браузер там обычно используется — все это по ссылочкам под вопросительными знаками. Также можно выбрать ориентацию экрана — портретная или ландшафтная. Еще одна весьма полезная примочка — просмотр либо Screen size, либо Real size. Первый определяется возможностями дисплея (физического размера пикселя), второй зависит от размера и разрешения экрана. Насколько я понимаю, для большинства устройств это одно и то же, но данный селектор как нельзя более актуален для современных мобильных устройств с высоким разрешением (до 1920х1080). Впрочем, в списке их нет…


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

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

Яндекс. Проверка мобильных страниц

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

Оценка производится на основе наличия meta-тега viewport, отсутствия больших картинок, «тяжелых» и неподдерживаемых мобильными устройствами элементов на странице (например, flash), а также представления контента: он не должен вылезать за пределы экрана ни в горизонтальном направлении, ни в вертикальном.

Проверка мобильных страниц на Яндексе

Похожие записи:

Понравилось? Поделись ссылкой с друзьями!

Метки: , ,

Оставить комментарий


Вы не бот? Докажите! Решите простой пример: *