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

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

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

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

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

Использование редактора тем WordPress

После этого откроется визуальный редактор темы оформления WordPress.

Использование редактора тем WordPress - 2

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

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

2. Использование инструментов разработчика Chrome

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

Использование инструментов разработчика Chrome

После этого с правой стороны откроется новая панель.

Использование инструментов разработчика Chrome - 2

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

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

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

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

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

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

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

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

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