Skip to content
 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

TEXT.RU - 100.00%

Я хочу быть в курсе событий на сайте!

Подпишитесь прямо сейчас, и получайте обновления на свой E-Mail:

Ваш E-Mail в безопасности

Google

21 комментарий

  1. Привет, Ирина. Я вручаю твоему замечательному блогу награду Liebster Blog Award. Это прекрасная возможность рассказать о себе читателям. Подробнее об этом здесь: http://rich-energy.ru/novosti/blogu-vruchili-nagradu-liebster-blog-award

    • Сергей, это уже шестая по счёту награда. Спасибо, за оказанное доверие. Навряд ли я смогу найти столько преемников. Уже наверное нет блога в интернете, который не удостоился чести получить награду. Я её принимаю, а вот смогу ли передать дальше, не знаю.

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

  3. Здравствуйте, Ирина!!))
    Я практически все время работаю то с планшета, то с смартфона!!)) Поэтому знаю, как мой блог выглядит в мобильных устройствах!!))
    PS: Исправьте Apple iPone 5 на Apple iPhone 5 💡 💡 💡

  4. Кстати, вспомнился момент, как я хотел такой телефон, как в картинке!!)) Он шикарен!!)) ❗ ➡ 😀 😆 😆

  5. Я специально не проверял, а просто заходил на сайт со своего телефона и видел как он отображается.

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

  7. Ирина,совсем про вас забыла,не общаюсь,просто некогда,делаю новый блог.Кстати,пользуюсь многоми вашими статьями

  8. Просто зайти через планшет или телефон и глянуть — не достаточно. У меня в планшете смотрится хорошо (на моих), а вот мобильная версия оказалась спорной. У меня в телефоне стоит в настройках — в одну колонку. И все бы ничего, пока гугл не показал мне другую сторону медали. Если убрать указанную настройку, то получается кошмар. Хотя, как мне говорили, на других устройствах, сайт тоже криво смотрится — сайтбар уходит за экран… не знаю, почему, сколько тестировала — вроде нормально.

    • @Светлана, у тебя вроде бы шаблон адаптирован под мобильные устройства. А то что сайты с любых устройств смотрятся по разному, я давно заметила. Даже при просмотре с разных компьютеров — разные изображения. 😮

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

Написать отзыв

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: