Просмотр сайта из мобильных приложений

мобильные устройства

Привет, друзья! Сегодня во время просмотра одного блога, я прочитала об установке расширения, которое позволяет «увидеть» сайт глазами пользователей мобильных устройств. И подумала, что не обязательно устанавливать дополнительные расширения там, где можно воспользоваться встроенными функциями браузера, и проверить вид сайта на мобильных устройствах.

Я не программист, и нашла этот способ методом «ненаучного тыка». Поэтому не претендую на полноту описания возможностей данного способа. Но в общих чертах расскажу, как можно проверить вид сайта в мобильных приложениях.

Описывать буду браузер Яндекс, но те же функции есть в Опере, и в Гугл хроме. Нажимаю иконку «настройки браузера», строка — «дополнительно», далее — «инструменты» — «инструменты разработчика». А если короче, то клавишами: ”Ctrl+Shift+I”.

Открывается такое окно с кодом (это снимок части окна):

просмотр сайта в мобильных устройствах

Ищем кнопку «Emulation». Нажимаем на неё, и клик по иконке мобильного телефона.

вид сайта в мобильных устройствах

В строке «Model» нажмите стрелку, и в выпадающем окне выбирайте ту модель мобильного устройства, с которой хотите просмотреть, как увидят ваш сайт. Вот, например, так виден мой сайт с мобильного устройства ”Google Nexus 72”

вид сайта в планшете

А вот так с ”Apple iPone 5”

вид сайта в телефоне

В строке ”Resolution” указываются размеры экрана с просматриваемых устройств. Следующая строка ”Device pixel ratio” указывает размеры в пикселях.
Для удобства можно окно развернуть на всю страницу, или сделать вместо горизонтального окна — вертикальное. Для просмотра как выглядит сайт из мобильных устройств, этих функций вполне достаточно. Остальные функции нужны разработчикам, занимающихся созданием мобильных сайтов, и тестирующие функциональные возможности сайта.

Но есть способ просмотра адаптивного дизайна сайта ещё проще. Нужно просто уменьшить (свернуть) окно браузера до нужного размера. Например до размера планшета, или до размера мобильного телефона. И вы увидите, как смотрится сайт с этих мобильных устройств.

А если вам нужно посмотреть, как выглядит сайт на устройствах с большим экраном, нужно уменьшить масштаб страницы в браузере: ”Ctrl” и нажать”-” (минус).
Надеюсь вам пригодится данная информация. Ведь число пользователей с мобильными приложениями растёт, и важно знать, как видят ваш сайт с этих устройств. Принять меры, по адаптации сайта к мобильным устройствам, или приобрести адаптированный шаблон для сайта. Содержимое сайта должно выглядеть прекрасно в различных устройствах.

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

С уважением, автор блога «Создание и продвижение сайта», Ирина Баталова.

TEXT.RU - 100.00%

Ссылка на основную публикацию