Как посмотреть мобильную версию сайта
Перейти к содержимому

Как посмотреть мобильную версию сайта

  • автор:

6 способов, как посмотреть мобильную версию сайта на компьютере

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

  • Под какие разрешения проверять? Наиболее популярные разрешения экранов
  • Способы проверки мобильной версии сайта на компьютере:

Под какие разрешения проверять? Наиболее популярные разрешения(DPR) экранов

На основании статистики https://www.hotlog.ru/global/screen на начало 2020 г. наиболее популярными реальными(виртуальные DPR) разрешениями экрана среди мобильных были следующие:

Наиболее популярные реальные(виртуальные DPR) размеры(разрешения) экранов телефонов на 2020 г.
Разрешение(ширина x высота) % от всех переходов с мобильных
360px(640-780px) 57%
375px(667-812px) 15%
412px(846-892px) 6%
414px(736-896px) 6%
320x568px 5%
393x851px 4%

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

Выше рассматривалась статистика по телефонам, но к мобильным устройствам также относятся и планшеты. Наиболее популярные разрешения среди планшетов 1024x768px и 1280x800px. Планшеты составляют всего 2,7% от всех устройств, с которых заходят в интернет(53,3% телефоны и 44% компьютеры), согласно исследованиям We Are Social и Hootsuite за 2019 г. При этом доля планшетов продолжает падать и за 2019 г. уменьшилась на 27%.

Учтите, что при отображении сайта на мобильном устройстве отсчет идет не от физических пикселей(они указаны в тех. характеристиках), а от виртуальных(DPR). Например, Samsung Galaxy S10 имеет разрешение 1440x3040px(физические пиксели, указанные в характеристиках), но фактически при отображении сайта такая детализация не нужна, поэтому реальное разрешение будет соответствовать 360x740px(виртуальные пиксели DPR). Проще говоря, каждые 16(4×4) физических пикселей будут сливаться вместе и выглядеть как один реальный(виртуальный).

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

Как узнать реальное(виртуальное DPR) разрешение смартфона

К сожалению, в характеристиках мобильных телефонов, как правило, не указывают число виртуальных пикселей, поэтому остается только искать таблицы соответствия физических и виртуальных пикселей в поисковиках, например, по запросу «viewport size».

1. Обычный браузер: Яндекс.Браузер, Google Chrome, Opera, Mozila Firefox (5 из 5 баллов)

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

Плюсы/минусы проверки в браузере на компьютере

Плюсы: — самый удобный и простой способ при разработке сайта

— Самый универсальный и правдоподобный способ, т.к. тест в реальном браузере;

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

— Не получится посмотреть небольшое количество сайтов(по личным оценкам менее 1%), у которых разработчики сделали недоступным просмотр мобильной версии на компьютере даже при изменении размера окна. Но если в браузере мобильная версия сайта отображается нормально, то 99,9%, что страница также будет открываться и на мобильных устройствах.

Как проверить мобильную версию сайта на компьютере в браузере

Чтобы открыть мобильную версию сайта на компьютере необходимо 2 шага:

1 Шаг. Включить «Инструменты разработчика»

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

В Яндекс.Браузер зажмите Ctrl+Shift+I или кликните: три вертикальные полоски —> «Дополнительно» —> «Дополнительные инструменты» —> «Инструменты разработчика».

Как включить «Инструменты разработчика» на примере Яндекс браузера

В Google Chrome нажмите Ctrl+Shift+I или зайдите: три вертикальные точки —> «Доп. инструменты» —> «Инструменты разработчика».

В Mozila Firefox зажмите Ctrl+Shift+I или перейдите: три вертикальные полоски —> «Веб разработка» —> «Инструменты разработчика».

В Opera нажмите Ctrl+Shift+I или кликните: «Меню» —> «Разработка» —> «Инструменты разработчика».

2 Шаг. Включить «Режим адаптивного дизайна(toggle device toolbar)»

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

Как включить «Режим адаптивного дизайна(toggle device toolbar)»

В Яндекс.Браузер, Google Chrome, Opera после выполнения 1 шага зажмите (Ctrl+Shift+M) или кликните на значок Toggle device toolbar(изображен планшет с телефоном). Появится поле для изменения разрешения и меню популярных смартфонов.

Как включить «Режим адаптивного дизайна» на примере Яндекс браузера

В Mozila Firefox после выполнения 1 шага нажмите (Ctrl+Shift+M) или кликните на значок: три вертикальные полоски —> «Веб разработка» —> «Адаптивный дизайн». Далее, появится выбор разрешения и меню популярных телефонов.

3 Шаг проверка на наиболее популярных размерах экрана

Проверьте, как выглядит сайт при всех наиболее популярных размерах ширины экрана у мобильной версии: 320px, 360px, 375px, 393px, 412px, 414px, 1024px, 1280px.

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

Проверка мобильной версии сайта на компьютере в Mozila Firefox. Достаточно открыть сайт и сжать окно просмотра.

2. Браузер blisk (5 из 5 баллов)

Браузер blisk — самый функциональный и удобный способ, как открыть и посмотреть мобильную версию сайта на компьютере при любом разрешении экрана. Blisk создан для разработчиков веб приложений и сайтов, основным отличием от проверки в обычном браузере является: более удобный интерфейс и возможность одновременного просмотра «десктоп» и «мобильной» версий в одном окне.

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

Плюсы/минусы проверки в браузере blisk

Плюсы: — самый удобный и простой способ при разработке сайта

— Быстрая установка без регистрации;

— Доступны все устройства с наиболее популярными разрешениями экранов;

— Самый функциональный и удобный способ;

— Проверить мобильную версию сайта можно при любом разрешении экрана;

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

— Бесплатная проверка мобильной версии сайта ограничена 30 мин. в день, далее доступен только платный тариф.

При проверке сайта не забудьте отключить кэширование(поставить «Cache» в позицию «off» сверху слева в панели Toolbox), иначе даже после изменений, может отображаться старая версия сайта.

Разрешения экрана мобильных устройств для проверки в браузере blisk

Чтобы убедиться, что на большинстве мобильных устройств сайт отображается корректно, важно знать не только, как открыть и проверить мобильную версию сайта на компьютере, но и при каких разрешениях смотреть. Рекомендую прощелкать в меню значки устройств, имеющих следующие размеры ширины экрана: 320px, 360px, 375px, 393px, 412px, 414px, 1024px(планшет), 1280px(планшет). Данные значения ширины экрана являлись наиболее популярными на начало 2020 г., более подробная статистика выше.

3. Adaptivator (2,5 из 5 баллов)

Adaptivator позволяется посмотреть мобильную версию сайта online, но среди доступных размеров ширины экрана мобильных версий нет 67% наиболее популярных разрешений, а некоторые имеющиеся размеры дублируются. Сервис получает низкую оценку, потому что непонятно, как посмотреть мобильную версию сайта на компьютере у большинства устройств.

Минусы:

— Нельзя посмотреть, как выглядит сайт у 67% мобильных пользователей. Отсутствует проверка мобильной версии сайта при следующих размерах ширины: 57% пользователей используют 360px(виртуальные пиксели DPR), 6% — 412px и 4% — 393px. Данные статистики на начало 2020 г.

— Показывает, как выглядит сайт на 12 разрешениях мобильных устройств.

— Показывает весь сайт целиком;

— Есть ширина экрана 320px, 375px. Если на этих размерах сайт отображается корректно, то, скорее всего, будет нормально отображается и при самой популярной ширине — 360px.

4. Responsinator (2 из 5 баллов)

responsinator.com — бесплатный сервис, который позволяет проверить мобильную версию сайта на нескольких разрешениях, но на нем нет 65% наиболее популярных размеров ширины экрана, поэтому низкая оценка. Вопрос: «как проверить мобильную версию сайта на компьютере при минимальной и еще используемой ширине 320px?» — остается неотвеченным. Ширина экрана 320 px является важным субъективным критерием т.к. если сайт открывается при 320 px, то, скорее всего, при остальных размерах мобильной версии тоже должен корректно отображаться.

Минусы:

— нельзя посмотреть, как выглядит сайт у 65% мобильных пользователей. Минимальный размер разрешения мобильной версии начинается с 374px. Но 57% мобильных устройств имеет ширину экрана 360px(виртуальные пиксели DPR), 5% — 320px и 4% — 393px. Статистика по разрешениям на начало 2020 г.

— Показывает сразу, как выглядит сайт на 10 разных разрешениях мобильных устройств;

— Показывает весь сайт целиком.

5. Яндекс.Вебмастер (1 из 5 баллов)

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

Минусы:

— Показывает, как отображается только верхня часть(область без прокрутки страницы);

— Проверка мобильной версии сайта только с одним разрешением, по ширине 320px(5% от всех мобильных устройств на начало 2020 г.);

— Необходимо проходить регистрацию и подтверждать права на сайт;

— Показывает хоть что-то, а это лучше, чем ничего.

6. Google test (1 из 5 баллов)

Google test, позволяет без регистрации и входа на сайт проверить, как отображается только верхняя часть сайта на мобильном телефоне. Нельзя посмотреть, как выглядит мобильная версия сайта на компьютере целиком, даже в единственном доступном разрешении — отображается только верхняя часть(область без прокрутки страницы).

Минусы:

— Показывает как отображается только верхня часть(область без прокрутки страницы);

— Проверка только с одним разрешением, около 410px по ширине, а это размер всего 12% мобильных устройств на начало 2020 г.

— Показывает хоть что то, а это лучше, чем ничего.

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

Как посмотреть мобильную версию сайта

Нашли ошибку? Выделите мышкой и нажмите Ctrl+Enter

Просмотр мобильной верстки с ПК

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

В Google Chrome, Mozilla Firefox и Яндекс браузере инструменты разработчика открываются клавишей F12.

В браузере Opera нужно открыть меню браузера и кликнуть пункт Другие инструменты → Показать меню разработчика.

Появится пункт «Разработка». Отсюда можете вызвать подпункт «Инструменты разработчика» или зажать комбинацию Ctrl+Shift+I.

Расположение кнопки перехода в режим адаптивного дизайна у Google Chrome, Opera и Яндекс браузера:

Кнопка перехода в режим адаптивного дизайна у Mozilla Firefox:

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

mobile page view

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

Еще в 2015 году компания Google сообщила о том, что адаптация сайта под мобильные устройства влияет на позиции сайта. А с 2016 года и Яндекс объявил о мобильных изменениях поискового алгоритма. Это говорит о том, что поисковые системы выводят оптимизированные под мобильные устройства сайты выше, чем те, которые не имеют оптимизации.

Адаптация страниц под нужды мобильных пользователей просто необходима, так как это влияет еще и на конверсию посетителей. Многие отмечают, что адаптивность сайта повышает конверсию от 30% до 60%.

С лета 2018 года Google также вводит ранжирование мобильных страниц по скорости загрузки. «Подвисающие», медленно загружающиеся сайты окажутся далеко от первых позиций в поисковой мобильной выдаче. Самое время задуматься о применении новых подходов, например, технологии совмещения свойств мобильного сайта и мобильного приложения, как Progressive Web App. Сайты на PWA работают даже в режиме оффлайн, сохраняются по 1 клику в смартфоне клиента (как обычное приложение), но при этом не тратят ресурсы смартфона (вес до 200 кб). Повышение конверсии при таком подходе дает более 50%. Больше о качествах и преимуществах Progressive Web App читайте в статье — «Progressive Web Apps: новая услуга для бизнеса, который стремится стать лидером в мобильной выдаче«.

Какими признаками обладает хороший мобильный сайт?

Контент должен удобно читаться, чтобы текст не приходилось увеличивать или бесконечно прокручивать вниз;

  1. Элементы интерфейса должны быть контрастными. Если человек читает ваш контент на улице, где экран засвечен, он должен четко видеть текст, картинки и кнопки;
  2. Мобильная версия не должна содержать Flash-элементы и излишнюю анимацию;
  3. Недопустима горизонтальная полоса прокрутки;
  4. Навигация должна быть максимально простой и последовательной;
  5. Сайт должен быстро загружаться;
  6. Тег viewport. При правильных настройках сайт будет отображаться на любых устройствах с любыми размерами экрана.

Как проверить сайт на мобильность?

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

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

Лучшие сервисы для проверки страниц на «мобильность»

1. Google Mobile Friendly

Этот сервис проверяет любой сайт. Достаточно вписать его адрес в строку — и на вашем экране отобразиться, как будет выглядеть ваша страница на смартфоне. Кроме того, сервис даст общую оценку его оптимизации.

Google Mobile Friendly проверка сайта на мобильном

Для просмотра ошибок переходите во вкладку Google Webmaster Tools. Выбираете в пункте “Поисковый трафик” — “Удобство просмотра на мобильных устройствах”.

сервис гугл мобайл френдли как ваш сайт выглядит на смартфоне

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

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

2. Яндекс Вебмастер

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

  • Наличие тега viewport;
  • Горизонтальную прокрутку;
  • Flash – элементы;
  • Java – апплеты;
  • Silverlight – плагины;
  • Удобство чтения.

3. Mattkersley

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

4. Bing

Этот сервис, в отличие от двух предыдущих, отображает, как сайт будет выглядеть не только на андроиде, но и на смартфоне с операционной системой Windows. Помимо выше указанных параметров, он проверяет сайт дополнительно еще по 4 пунктам:

  • Правильно ли настроено окно просмотра?
  • Соответствует ли ширине экрана содержимое страницы?
  • Читаемый ли текст?
  • Достаточно ли крупны и удобны ссылки и кнопки на сайте.

5.Responsinator

Этот сервис, в отличие от других, не дает оценки, но показывает сайт в разных расширениях для 6 разных устройств на IOS и Android.

6.Ipadpeek и iPhone Tester

Эти сервисы позволяют проверить свой сайт прямо с мобильного устройства.

7.Screenfly

Позволяет тестировать сайт на экранах разных телефонов, включая HTC, LG, BlackBerry и Samsung.

8.Gomez

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

9.Testmysite

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

проверьте скорость загрузки ваших страниц на мобильном устройстве

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

10. Responsivedesign

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

отображение страниц на телефоне, планшете, ноутбуке и настольном компьютере

http://ami.responsivedesign.is

Выводы

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

Если необходимо увеличить скорость загрузки мобильного сайта, используйте новую технологию Progressive Web Apps.

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

Как проверить мобильную версию сайта с компьютера

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

Изображение. Обычная версия дизайна сайта

Обычная версия дизайна сайта

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

Изображение. Мобильная версия дизайна сайта

Мобильная версия дизайна сайта

  • Вам удобно просматривать содержимое сайта. Тексты читаются легко. Кнопки и ссылки можно нажать не увеличивая экран.
  • Сайт влезает целиком по ширине экрана смартфона.
  • При повороте экрана блоки сайта (тексты и картинки) перестраиваются. Не возникает искажений в контенте и элементах дизайна.
  • Основное меню сайта (возможно и контактные данные) вынесены в отдельное окно, которое появляется при нажатии специального значка в верхней части экрана.
  • Контактные телефоны кликабельны. При нажатии телефон открывается для набора в телефонной книге смартфона.

Иногда необходимо проверить мобильную версию сайта, когда под рукой нет смартфона. Или же бывает необходимость проверить мобильную версию сайта на разных смартфонах. В этом случае в браузерах таких как Google Chrome или Mozilla Firefox есть специальный инструмент. С помощью него можно легко проверить мобильную версию сайта, выбирая нужное мобильное устройство в меню. При выборе нужного устройства браузер будет имитировать размеры его экрана и вы увидите как отображается ваш сайт.

Адаптивный дизайн или мобильная версия?

В чем же основное отличие мобильной версии от адаптивного дизайна? Все очень просто.

Адаптивный дизайн

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

Мобильная версия

Сайт с мобильной версией имеет два отдельных файла стилей дизайна. Например style.css и style_mobile.css Отдельный файл для ПК и отдельный файл для мобильных устройств. Нужный файл стилей подгружается в зависимости от устройства с которого сайт открывают. Сайт определяет это устройство и подключает тот подходящий файл стилей .css Как правило, в файле стилей для ПК прописано, что основная область для контента сайта зафиксирована посередине экрана и ширина этой области неизменна, например: 1024px. А в файле с мобильными стилями прописано, что контентная область сайта располагается по ширине устройства.

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

Проверяем мобильную версию.

Чтобы проверить мобилную версию сайта с ПК нужно проделать ряд действий.

Проверяем мобильную версию сайта.

  • 1. Откройте сайт в браузере GoogleChrome или MozillaFiefox
  • 2. Нажмите F12, чтобы открыть инструменты разработчика
  • 3. В открывшемся окошке найдите значок переключения на мобильные устройства и нажмите его.
  • 4. Теперь в верхнем меню можно выбирать устройство. Выберите любое устройство из списка, например iPhone X
  • 5. Нажмите F5, чтобы обновить страницу и чтобы отобразилась мобильная версия. Это необходимо сделать, так как сайт определяет тип устройства именно при загрузке страницы.
  • 6. Все готово. Можно проверять сайт. Походите по страницам, попробуйте открыть меню, понажимать кнопки, чтобы увидеть мобильную версию сайта.

Проверяем адаптивный дизайн.

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *