Svinkovod.ru

Бытовая техника
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

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

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

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

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

Добрый день! Уважаемые читатели и гости блога pyatilistnik.org, в прошлый раз я вам рассказал, как восстановить работу флешки, у которой при форматировании писалось: Диск защищен от записи. Сегодня переключимся на другое русло и разберем, как можно посмотреть мобильную версию сайта, одним кликом. Данная информация будет очень актуальна, людям, кто только что создал свой блог или перевел его на новый шаблон и хотел бы убедиться или просто увидеть, как это отобразиться у конечного пользователя. Чтобы все было красиво и привлекало больше мобильного трафика.

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

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

Я для таких вещей использую браузер Google Chrome, во первых он удобный и быстрый, а во вторых в нем есть все, что нужно веб дизайнеру и разработчику. Откройте в браузере ваш сайт и нажмите клавишу F12.

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

В верхнем углу вы увидите модель текущего телефона который отображает ваш ресурс. Нажав на него вы увидите расширенный список в котором будут присутствовать и iPhone последних моделей, так и Lumia на Microsoft Windows 10.

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

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

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

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

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

Сразу возникает вопрос, а в чём же сложность? В отличие от адаптивного дизайна, мобильный шаблон — это отдельный набор файлов и стилей, который доступен только пользователям мобильных устройств. Такая избирательность реализуется путём определения соответствия параметра « user-agent ».

То есть, прежде чем загрузить какую-либо веб-страницу, сайт сверяется с параметрами пользовательского браузера, уже исходя из этого выдаёт один или другой вариант. Например, сайт получает user-agent — “firefox”, значит отрабатывается загрузка десктопной (полной)версии сайта. Если же user-agent — “Android”, то сайт понимает, что требуется открыть мобильную версию сайта.

Читайте так же:
Как войти в безопасный режим через bios

Через браузер Firefox

Чтобы посмотреть сайт как мобильный пользователь из браузера Mozilla Firefox, следует обратиться к встроенным инструментам веб-разработки. Для этого открываем сайт и в панели меню (сверху / можно вызвать клавишей « Alt ») переходим по пути:
Инструменты ? Веб-разработка ? Адаптивный дизайн

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

Через браузер Chrome

Если вы активный пользователь браузера Google Chrome, то предварительно устанавливаем расширение с говорящим названием « User-Agent Switcher for Chrome ». А далее обращаемся к новому элементу в панели сверху (слева от «меню параметров») — смайлик в очках.

Щелчком мыши разворачиваем список доступных агентов. Выбираем одну из популярных мобильных ОС Android или iOS, и сайт преобразовывается на глазах. По окончании работы с мобильной версией сайта не забудьте перейти обратно на агент « Chrome / default ».

Вместо послесловия

Таким образом, можно открыть любой мобильный сайт. Благодаря описанным возможностям, в прошлой статье нам удалось посетить мобильную версию Instagram и добавить новые фото в свой профиль. А как вам удалось разрешить проблему полной и мобильной версии сайта?

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

Проверку вашего сайта на удобство отображения на мобильных устройствах можно проверить с помощью различных веб-сервисов. В частности, данный сервис от 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:

Здесь вы сможете не только увидеть отображение сайта на том или ином девайсе, но и полноценно работать с сайтом, будто перед вами находится нужный гаджет. Несомненно, этот инструмент является просто незаменимым при разработке мобильной версии сайта, но как будет отображаться ваш сайт на реальных устройствах – нужно проверять на реальных устройствах. Особенно это важно, если нужно проверить отображение сайта в "родных" браузерах (Safari – для iPad/iPhone, IE – для Windows Phone и т.д.).

Читайте так же:
Можно ли восстанавливать сообщения в контакте

Браузер: отключаем мобильные сайты

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

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

Большой недостаток такой схемы – психологический дискомфорт человека, увидевшего с планшета или смартфона совсем не тот сайт, который он привык читать с ПК или ноутбука. Появляется потребность «поиска нужной кнопки» (или, например, исчезнувшей третьей колонки), возникает связанное с этим раздражение, т.к. люди уже избалованы современными сервисами, делающими за нас буквально все. В данном же случае человек видит урезанный функционал любимого сайта, отсутствие привычных меню на нужном месте и т.п. Сразу появляется желание перейти в футер ресурса и нажать кнопку «Полная версия» или вообще закрыть его почитать что-то еще.

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

Opera Mobile

В итоге, пользуясь самым распространенным мобильным браузером под Android – Google Chrome и видя явно «урезанную» внешне страницу какого-либо сайта, мне постоянно приходилось ставить в «Настройках» галочку «Полная версия». Сделать такую настройку постоянной оказалось в Chrome невозможно. Для некоторых сайтов показ «полной версии» запоминается, для других – нет, для третьих (например, МТС) вообще не срабатывает. В определенный момент с меня этого хватило. Пришлось искать альтернативу.

К сожалению, мой любимый настольный Mozilla Firefox, в котором так удобно работать на ПК с исходным кодом, в мобильном варианте меня огорчил – не понравилось масштабирование шрифтов, а система отключения «мобильных версий» в нем аналогична Chrome и не постоянна.

Браузер Opera для Android. Скачав его на свой смартфон, я, наконец, решил данную проблему. Прежде всего, речь идет не об Opera Mini, которая пусть и сжимает трафик, но крайне убога в своей реализации, т.к. не понимает многие скрипты и стили, искажая привычный дизайн современных сайтов. Мы говорим о полной версии мобильной Opera. Для желающих экономить трафик и сжимать картинки – в ней тоже есть режим «Турбо» (Opera Turbo), так что просто активируйте его в «Настройках». Там же вы найдете и нужный нам пункт:

User agent: «Мобильное устройство» или «Настольный компьютер».

По умолчанию стоит «Мобильное устройство». Выбираем «Настольный компьютер».

Читайте так же:
Можно ли использовать оперативную память разного объема

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

К счастью, браузер Opera меня устроил и в других отношениях: удобная настройка «Вид приложения» — «Телефон», «Классика» или «Планшет» настраивает отображение дополнительных кнопок и меню. Шрифты масштабируются как надо, странички выглядят опрятно и читаемо.

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

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

В данной статье рассмотрим основные настройки мобильной версии интернет-магазина.

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

Для того чтобы включить мобильную версию и произвести настройки, необходимо перейти в пункт меню "Мои сайты — Моб. версия" (рис. 1).

Настройка мобильной версии - 2226
Рисунок 1.

Как вы видите на рис.1 QR код вашей мобильной версии. Сканируйте QR на мобильном устройстве, чтобы быстро перейти в мобильную версию.

Далее поставьте галочку в поле активность и перейдем к рассмотрению настроек (рис.2).

Настройка мобильной версии - 9100
Рисунок 2.

  1. Активность — настройка, позволяющая выбрать какая версия будет открываться при заходе клиента в магазин с мобильного устройства: полная или мобильная.
  2. Полное оформление заказа (по умолчанию заказ в 1 клик) – настройка, отвечающая за тип оформления заказа, а именно, если галочка не стоит, то по умолчанию, будет форма покупки в 1 клик, если галочка стоит, то оформление будет полным, как в полной версии сайта со всеми полями заполнения: с выбором способа оплаты и способа доставки. Более подробно о данной настройке можете почитать здесь.
  3. Перенаправлять на поддомен m. (поддомен должен быть привязан к сайту) — если включить данную настройку, то при открытии сайта с мобильного устройства, автоматически домен измениться на m.домен. Это необходимо, если хотите использовать для мобильной версии отдельный файл robots.txt (настройка файла robots.txt находится во вкладке robots.txt).
  4. Тема дизайна по умолчанию с версии 8.5 используется тема дизайна для мобильной версии — современная (рис.3). Классическая тема дизайна выбирается, если версия интернет-магазина ниже 8.5 (рис.4).

Настройка мобильной версии - 9519
Рисунок 3.

Настройка мобильной версии - 9397
Рисунок 4.

  1. Цвет панели браузера выбираете из один из трех вариантов:
    • Не задано — когда цвет браузера будет белый (рис.5);
    • Согласно цветовой схеме — цвет браузера будет такой же как цветовая схема магазина (рис.6);
    • Свой цвет — выбираете цвет в настройках (рис.7), как выглядит с разными цветами показано на рис.8.

Настройка мобильной версии - 7318
Рисунок 5.

Настройка мобильной версии - 6197
Рисунок 6.

Настройка мобильной версии - 2266
Рисунок 7.

Настройка мобильной версии - 9866
Рисунок 8.

В теме дизайна "Современная", дополнительно доступны следующие настройки:

  • Цвет шапки — выбираете либо цвет белый (рис.9), либо цвет по цветовой схеме магазина, например, в интернет-магазине цветовая схема синяя (рис.10).

Настройка мобильной версии - 5736
Рисунок 9.

Настройка мобильной версии - 2553
Рисунок 10.

  • Вид отображения категорий — выбираете "выводить корневые категории" (то есть в меню список категорий сразу виден (рис.11)) или "отображать только ссылку" (в меню будет ссылка "каталог" и только при нажатии на нее откроется список всех категорий (рис.12)).
Читайте так же:
Можно ли заряжать аккумулятор малым током

Настройка мобильной версии - 6573
Рисунок 11.

Настройка мобильной версии - 7818
Рисунок 12.

  • Уровень вложенности навигации категорий каталога — указываете число до какого уровня можно будет перейти в меню (рис.13).

Настройка мобильной версии - 5223
Рисунок 13.

  • Высота блока изображения товара в каталоге — указываете размер высота блока (рис.14).

Настройка мобильной версии - 9089
Рисунок 14.

  • Отображения категорий на главной странице — выбираете из выпадающего меню один из трех варинтов отображения категорий на главной странице (не выводить, без иконок, с иконками) (рис.15 ,16, 17).

Настройка мобильной версии - 8838
Рисунок 15.

Настройка мобильной версии - 9862
Рисунок 16.

Настройка мобильной версии - 8485
Рисунок 17.

  • Отображать ссылку все товары категории в меню — данная настройка позволяет выводить ссылку в меню для перехода на страницу всех товаров (если товары добавлены в корневой каталог).

Настройка мобильной версии - 2299
Рисунок 18.

    Варианты отображения логотипа — выбираете вариант отобаржения логотипа в мобильной версии, а именно:

Настройка мобильной версии - 5904
Рисунок 19.

Настройка мобильной версии - 4101
Рисунок 20.

Настройка мобильной версии - 8620
Рисунок 21.

  • Текст — если выбираете данный пункт, то добавляются дополнительно 2 настройки (рис.19): выбираете либо "Показывать заголовок по умолчанию" (заголовок берется из общих настроек рис.20), либо "Свой заголовок" (вписываете свое название рис.21)
  • Логотип десктопной версии — подгрузится логотив как в полной версии сайта.
  • Загрузить свой логотип — можете загрузить свой логотип конкретно для мобильной версии.

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

  1. Автоматический переход на мобильную версию при изменении размера окна — данная настрока позволяет автоматически менять версию магазина, то есть переход с полной версии на мобильную и наоборот, если изменлся размер окна. Отключенная галочка, то переход на мобильную версию будет по запросу и желанию клиента.
  2. Тип отображения списка товаров в каталоге (по умолчанию) — выбираете тип отображения товаров в каталоге (плитка, список, блоки). И настройка "Разрешить покупателям менять тип" — позволяет менять тип отображения клиентам на сайте.
  3. Количество товаров на главной — поле отвечает за количество товаров на главной странице сайта.
  4. Выводить город — настройка позволяет выводить город в мобильной версии автоматически. Если галочка стоит, то город будет выводиться, если галочку убрать, то города не будет. На рисунке 22 показано, как будет выглядеть мобильная версия с включенной настройкой. На рисунке 23 показано, как выглядит мобильная версия с отключенной настройкой вывода города.

Настройка мобильной версии - 7023
Рисунок 22.

Настройка мобильной версии - 9086
Рисунок 23.

  1. Выводить карусель — настройка отвечает за вывод карусели в мобильной версии: если галочка стоит, то карусель будет включена и отображаться в мобильной версии (рис.24), если галочка выключена, то карусель не будет выводиться (рис.25).

Настройка мобильной версии - 1523
Рисунок 24.

Настройка мобильной версии - 2903
Рисунок 25.

Внимание!

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

Номер телефона

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

Основной телефон магазина для мобильной версии будет показан для всех городов, для которых не задан телефон. Телефон вводится без форматирования в разделе "Настройки" — "Общие настройки" (рис.26), вкладка "О магазине", поле "Основной телефон в числовом формате" (рис.27). Пример: 74950000000.

Читайте так же:
Можно ли в утюг залить лимонную кислоту

Настройка мобильной версии - 2689
Рисунок 26.

Настройка мобильной версии - 3819
Рисунок 27.

Для разных городов также можно указывать разные номера телефонов, для этого перейдите в пункт меню "Настройки — Общие настройки", под полем "Телефон" нажмите на кликабельную ссылку "Указать разные телефоны для некоторых городов", (рис.28), затем для нужного города укажите номер телефона (рис. 29).

Настройка мобильной версии - 1702
Рисунок 28.

Настройка мобильной версии - 8249
Рисунок 29.

Robots.txt в мобильной версии

Файл robots.txt – это файл, который необходим для роботов поисковых систем. Данное поле можно настраивать, если мобильная версия доступна по поддомену m.

Если у вас поддомена нет, то файл будет такой же, как в полной версии сайта.

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

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

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

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

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

Сразу возникает вопрос, а в чём же сложность? В отличие от адаптивного дизайна, мобильный шаблон — это отдельный набор файлов и стилей, который доступен только пользователям мобильных устройств. Такая избирательность реализуется путём определения соответствия параметра « user-agent ».

То есть, прежде чем загрузить какую-либо веб-страницу, сайт сверяется с параметрами пользовательского браузера, уже исходя из этого выдаёт один или другой вариант. Например, сайт получает user-agent — “firefox”, значит отрабатывается загрузка десктопной (полной)версии сайта. Если же user-agent — “Android”, то сайт понимает, что требуется открыть мобильную версию сайта.

Через браузер Firefox

Чтобы посмотреть сайт как мобильный пользователь из браузера Mozilla Firefox, следует обратиться к встроенным инструментам веб-разработки. Для этого открываем сайт и в панели меню (сверху / можно вызвать клавишей « Alt ») переходим по пути:
Инструменты ? Веб-разработка ? Адаптивный дизайн

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

Через браузер Chrome

Если вы активный пользователь браузера Google Chrome, то предварительно устанавливаем расширение с говорящим названием « User-Agent Switcher for Chrome ». А далее обращаемся к новому элементу в панели сверху (слева от «меню параметров») — смайлик в очках.

Щелчком мыши разворачиваем список доступных агентов. Выбираем одну из популярных мобильных ОС Android или iOS, и сайт преобразовывается на глазах. По окончании работы с мобильной версией сайта не забудьте перейти обратно на агент « Chrome / default ».

Вместо послесловия

Таким образом, можно открыть любой мобильный сайт. Благодаря описанным возможностям, в прошлой статье нам удалось посетить мобильную версию Instagram и добавить новые фото в свой профиль. А как вам удалось разрешить проблему полной и мобильной версии сайта?

голоса
Рейтинг статьи
Ссылка на основную публикацию
Adblock
detector