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

Как Посмотреть Мобильную Версию Сайта на Компьютере

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

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

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

Способ 1

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

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

Способ 2

Как я и говорил, немного больше действий потребуется. Нужно зайти на сервис http://www.responsinator.com, и уже там, в шапке сайта ввести адрес своего или проверяемого сайта. Дальше просто нажать ОК и дождаться загрузки. Всё, смотрим мобильную версию сайта на компьютере и наслаждаемся адаптацией, если, конечно, проверяете свой сайт.

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

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

Источник

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

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

В Google Chrome

Для того, чтобы открыть мобильную версию сайта с компьютера потребуется открыть Google Chrome и перейти на нужный URL после чего кликнуть правой клавиши мыши в любом месте экрана и в выпавшем меню выбрать пункт «Посмотреть код».

В правом-верхнем углу кликаем на значок «Мобильный телефон».

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

Также доступно изменение масштаба.

Дополнительно можно выбрать способ отображения (online/offline).

При необходимости стоит изменить ориентацию экрана на альбомную или стандартную.

В Mozilla Firefox

Посмотреть мобильную версию сайта с компьютера в Mozilla можно аналогично кликнув в любую точку сайта правой клавишей мыши и в меню выбрав «Исследовать элемент».

Далее в нижнем-правом углу потребуется выбрать вид «Мобильный телефон».

При необходимости нажав на «Адаптивный» можно выбрать нужную модель смартфона.

Справа можно настроить разрешение экрана (настраивается вручную).

Далее идет возможность изменить ориентацию экрана.

После можно изменить DPR (Соотношение пикселей устройства к снимку экрана).

Как и в Google Chrome можно изменить способ подключения на 2G, 3G, GPS, 4G или

Также при необходимости можно включить имитацию устройства (требует перезагрузки браузера).

Ручной метод

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

Для чего это нужно?

Данный навык будет полезен при:

Источник

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

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

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

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

Как видно из статистики минимальная ширина экрана 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% наиболее популярных разрешений, а некоторые имеющиеся размеры дублируются. Сервис получает низкую оценку, потому что непонятно, как посмотреть мобильную версию сайта на компьютере у большинства устройств.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

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

Вступление

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

О мобильной версии сайта – два слова

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

На самом деле есть третий способ — использовать прогрессивное веб-приложение PWA. Приложение не только адаптируют ваш сайт под любое мобильное устройство, но выполняет уведомления в режиме реального времени (push-уведомления), поддерживает ваш сайт в автономном режиме и имеет ряд других уникальных возможностей.

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

Также напомню, что мобильная версия и адаптивный дизайн НЕ имеют ничего общего с AMP версией сайта. (читать об AMP тут).

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

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

Важно! Обращу ваше внимание, что большинство предлагаемых сервисов проверяют НЕ только мобильную версию сайта (mobile), но и его адаптивность (responsive). То есть выполняется проверка на общую адаптивность сайта для мобильных устройств.

Сервис №1: Проверка мобильных версий от Google Search Console

Работать с данным сервисом можно без аккаунта Google. Пояснять работу сервиса, наверное, не стоило, но всё же. В поле проверки вписываете URL своего сайта и нажимаете кнопку «проверить».

Адаптация сайта будет проинформированная зеленой информацией. Нарушение адаптации будет сообщено красным цветом.

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

Работать с этим сервисом без Яндекс аккаунта и добавление сайта в Яндекс.Вебмастер НЕ получится. Однако, если вы всё перечисленное сделаете, проверка мобильных страниц станет лишь одним из инструментов Яндекс.Вебмастер.

Для проверки вам нужна вкладка сервиса «Инструменты>>> Проверка мобильных страниц. Далее выбираете свой сайт в списке сайтов и проверяете его мобильность.

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

Эмулятор мобильного телефона COWEMO

Один из сервисов компании COWEMO позволяет создать эмуляцию просмотра сайта на одном из 13-ти устройствах.

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

Особенности:

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

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

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

Screenfly

Screenfly позволяет просматривать ваш сайт на различных экранах устройств и разрешениях. Введите URL-адрес и нажмите GO.

Особенности

Responsivepx

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

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

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

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

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

Платный мобильный эмулятор страницы

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

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

Вывод

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

Источник

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

Мы уже обсуждали как сделать мобильную версию сайта, в текущей статье речь пойдет о том, как осуществляется проверка мобильной версии сайта, её удобство, читабельность и правильность отображения.

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

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

Проверяем качество мобильной вёрстки с помощью Google Chrome

Для разработчиков у Google есть отличный инструмент для имитации мобильных устройств. Этот инструмент встроен в браузер Google Chrome. Для доступа к нему нужно нажать F12 в браузере (перейти в режим разработчика) и нажать на значок смартфона:

Страница преобразуется в режим переключения устройства, где вы сможете выбрать одно из популярных мобильных устройств, тип сети (GPRS, 2G, 3G, 4G и т.д.), указать строгие параметры дисплея. Это позволяет имитировать работу сайта на конкретных мобильных девайсах. К числу доступных устройств относятся различные версии iPad, iPad Mini, iPhone, BlackBerry, Google Nexus, HTC, LG, Nokia, Samsung Galaxy и некоторых других популярных устройств.

Выбрав определенный девайс вы сможете проверить сайт на мобильном устройстве. Например, отображение главной страницы сайта «Нубекс» на iPad 3:

И на Samsung Galaxy S4:

Источник