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

Автор:
Nurlan Kemelbekov

Вы хотите проверить адаптивность дизайна WordPress темы без интернета, отзывчивый дизайн макета сайта в стадии разработки на локальном сервере?

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

Responsive Page Tester для проверки дизайна автономно

Если вы отрезаны от интернета и заняты разработкой сайта в автономном режиме, то нелегко проверять каждый раз изменения в окне браузера (снова и снова). Responsive Page Tester обеспечивают простой и быстрый способ проверить адаптивность дизайна WordPress темы без интернета в автономном режиме. С плагином Responsive Page Tester, вы можете проверить отзывчивый дизайн в том же формате, что и на онлайн-инструментах, но без подключения к Интернету. Этот плагин нужно просто установить и активировать — нет никаких дополнительных опций для настройки.

Отзывчивый дизайн. Проверка на локальном WordPress

Предполагается, что у Вас уже имеется WordPress, установленный на компьютер и у Вас есть возможность редактировать темы в локальном режиме, т.е. без Интернета. Если нет, Вы могли бы почитать одну из статей, посвященных этой теме. К примеру, Запуск WordPress локально с WampServer или Как установить WordPress локально с помощью Xampp. В режиме предварительный просмотр сайта вы должны увидеть кнопку «Responsive» на верхней правой части панели инструментов. gallery thumbnail gallery thumbnail Если панель инструментов не отображается в режиме предварительного просмотра, то в разделе Пользователи в панели WordPress нажмите кнопку «Изменить» конкретного пользователя и убедитесь, что опция «Показать верхнюю панель, при просмотре сайта » включена (галочкой).

Проверьте адаптивность дизайна в различных размерах экрана

В режиме предварительного просмотра, нажмите на кнопку Responsive, а затем на конкретной вкладке выберите размер экрана в соответствии с требованием: 240 х 320 (маленький телефон), 320 X 480 (iphone / Android), 480 X 640 (маленький планшет), 768 X 1024 (таблетка — портретный), 1024 X 768 (таблетки ландшафтный). Существует также вариант, при котором можно просматривать макеты в различных размерах экрана одновременно. Чтобы выключить проверку, просто нажмите клавишу ESC или щелкните кнопку «Responsive» снова.

Проверить отзывчивость расширением браузера Chrome

ResponsiVew и Responsive Web Design Tester это расширение для Chrome браузера, которые одним щелчком мыши откроют новое окно с указанными размерами мобильного устройства. Адаптивный дизайнResponsiVew включает в себя настройки по умолчанию для 480 х 320px и 768 х 1024px, но вы также можете задать собственную высоту и ширину для браузера и проверить адаптивность дизайна шаблона WordPress блога. Если Вы обратите внимание на url-адрес в картинке слева, можете заметить, что я тестировал отзывчивость сайта, установленного на компьютере с Instant WordpPress , использовав для этого Responsive Web Design Tester — расширение для Chrome браузера. Вот и все. Теперь можно проверять адаптивность дизайна WordPress темы без интернета, как говорится «не отходя от кассы». Использовали ли вы инструменты тестирования, которые упоминались выше? Дайте нам знать в комментариях!



Вам также может понравиться:


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

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

* Copy This Password *

* Type Or Paste Password Here *

5 + 16 =

Я просто хотел сказать, как сильно я ценю Ваш комментарий на мой пост. Спасибо Вам !!