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


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

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

В Google Chrome

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

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

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

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

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

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

В Mozilla Firefox

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

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

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

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

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

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

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

  • Без ограничения;
  • GPRS;
  • Regular 2G;
  • Goog 2G;
  • Regular 3G;
  • Good 3G;
  • Regular 4G/LTE;
  • DSL;
  • Wi-Fi.

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

Ручной метод

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

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

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

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

Хотите предварительно просмотреть мобильную версию своего сайта WordPress? Предварительный просмотр мобильного макета поможет вам увидеть, как ваш сайт выглядит на мобильных устройствах.

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

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

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

Почему стоит предварительно просмотреть макет мобильного устройства

Более 50% посетителей вашего сайта будут использовать свои мобильные телефоны для доступа к вашему сайту. Около 3% будут использовать планшеты.

Это означает, что очень важно иметь сайт, который отлично смотрится на мобильных устройствах.

На самом деле, мобильные устройства настолько важны, что Google теперь использует индекс «сначала мобильные» для своего алгоритма ранжирования веб-сайтов.

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

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

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

Видеоурок

Подписаться на WPBeginner

Если вам не нравится видео или вам нужны дополнительные инструкции, продолжайте читать.

1. Использование настройщика тем WordPress

Вы можете использовать настройщик тем WordPress для предварительного просмотра мобильной версии вашего сайта WordPress.

Просто войдите в свою панель управления WordPress и перейдите на экран Внешний вид »Настроить .

Это откроет настройщик тем WordPress. В зависимости от того, какую тему вы используете, в левом меню вы можете увидеть немного разные параметры:

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

Примечание: Синие символы редактирования присутствуют только в средстве предварительного просмотра. Вы не увидите их на своем действующем сайте.

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

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

2. Использование режима устройства Google Chrome DevTools
В браузере

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

Просто откройте браузер Google Chrome на рабочем столе и перейдите на страницу, которую хотите проверить.

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

Затем вам нужно щелкнуть правой кнопкой мыши на странице и выбрать «Проверить».

С правой стороны откроется новая панель, например:

В представлении разработчика вы сможете увидеть исходный HTML-код своего сайта.

Затем нажмите кнопку «Переключить панель инструментов устройства», чтобы перейти к мобильному представлению.

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

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

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

Этот круг можно перемещать с помощью мыши, чтобы имитировать сенсорный экран мобильного устройства.

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

Над мобильной версией вашего сайта вы увидите некоторые дополнительные параметры.

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

Как создать контент для мобильных устройств в WordPress

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

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

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

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

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

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

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

Бонус: Ознакомьтесь с нашим выбором лучших телефонных сервисов для бизнеса, чтобы вы могли добавить кнопку «Щелкнуть для вызова» для мобильных пользователей.

Если вам понравилась эта статья, то подпишитесь на наш канал YouTube для видеоуроков по WordPress. Вы также можете найти нас в Twitter и Facebook.

.

Как запросить мобильный сайт после запроса настольного сайта в Safari на iPhone

Хотите знать, как вернуться на мобильный сайт после запроса настольного сайта в Safari для iPhone? Возможно, вы заметили, что в Safari на iPhone и iPod touch нет опции «Запросить мобильный сайт», но вернуться к мобильной версии настольного сайта довольно просто на iPhone с Safari, как мы покажем вам в этом руководстве.


Как вы, вероятно, знаете, многие веб-сайты обслуживают версию, предназначенную для мобильных устройств, для устройств с меньшим экраном, таких как iPhone или iPod touch.Но иногда пользователи будут использовать функцию «Запросить сайт рабочего стола» в Safari для iPhone для просмотра полной версии сайта, а не мобильного сайта. Но как снова переключиться на мобильный сайт? Это просто, вот все, что вам нужно сделать:

Как переключиться с настольного сайта обратно на мобильный сайт с Safari для iPhone

Чтобы вернуться к мобильной версии веб-сайта в Safari на iPhone, достаточно просто закрыть вкладку и снова открыть веб-сайт:

  1. В Safari на iPhone перейдите на настольную веб-страницу, которую вы хотите просмотреть на мобильном сайте для
  2. Нажмите кнопку «Вкладки» в Safari, а затем закройте эту вкладку веб-страниц, пока она все еще находится в представлении Desktop Site (при желании вы можете сначала скопировать URL-адрес для облегчения поиска)
  3. Теперь откройте новую вкладку Safari и вернитесь к URL-адресу веб-сайта, который вы только что закрыли, он загрузится автоматически в представлении Mobile Site

Простое закрытие вкладки Safari на iPhone и повторное открытие веб-страницы вернет ее в режим просмотра мобильного сайта по умолчанию.

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

Хотя здесь мы, очевидно, сосредоточились на iPhone, этот процесс одинаков для iPod touch и iPad, хотя большинство веб-сайтов все равно будут показывать iPad полную версию веб-сайта для настольных компьютеров, а не для мобильных устройств.

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

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

Если вам известен другой подход к повторному запросу мобильного сайта в Safari для iPhone, поделитесь с нами в комментариях ниже.

Связанные

.

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

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
.

php - переход с мобильной версии на полноценный веб-сайт (настольная версия)

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
.

Смотрите также

Поделиться в соц. сетях

Опубликовать в Facebook
Опубликовать в Одноклассники
Вы можете оставить комментарий, или ссылку на Ваш сайт.

Оставить комментарий