Как проверить вид сайта на разных устройствах


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

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

Режим адаптивного дизайна в браузере Google Ghrome или Mozilla Firefox

Это пожалуй, самый надежный способ после просмотра на реальном устройстве.

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

Как проверить вид сайта на разных устройствахMozilla Firefox

Самый простой способ включения режима адаптивного дизайна в Мозилле – использовать сочетанием клавиш Ctrl + Shift + M, на Mac Cmd + Opt + M.  Здесь можно посмотреть другие способы включения режима адаптивного дизайна в Мозилле.

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

Доступна прокрутка страницы.

 

Google Ghrome

Нажимаем   F12 и оказываемся в панели Инструментов разработчика Chrome (Chrome DevTools).

Затем входим в режим эмуляции экрана, нажав уже знакомое сочетание  Ctrl + Shift + M, на Mac Cmd + Opt + M или нажав на кнопку переключения в режим устройства.

 

Затем, точно так, как в Mozilla Firefox можно проверить адаптивность, выбрав модель устройства или задав свои, пользовательские размеры экрана.

 

WordPress

ПРоверить как выглядит сайт на разных устройствах - worpressЕсли вы разрабатываете сайт на WordPress,  то вы можете из панели управления в панели управления  быстро проверить вид сайта на разных устройствах. Для этого в админке нужно выбрать пункт меню Внешний вид> Настроить.
На странице настроек темы в левом нижнем углу есть возможность выбрать устройство – компьютер, планшет или мобильный телефон. Этот способ не позволяет протестировать все устройства, но для того, чтобы быстро оценить адаптивность веб-страницы, вполне подходит.

 

Онлайн проверка

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

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


Комментировать