Как проверить сайт на адаптивность?

Приветствую вас на сайте Impuls-Web!

В данной статье мы поговорим с вами о том, как проверить адаптивность вашего сайта.

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

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

Начнем с онлайн-сервисов.

Сервис ami.responsivedesign

Самый первый онлайн-сервис называется ami.responsivedesign. Попадая на главную страницу данного сервиса, прокручиваем вниз и в поле для ввода вставляем адрес сайта, который мы хотим проверить на адаптивность. После чего нажимаем на кнопку «Go».

Онлайн-сервис ami.responsivedesign

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

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

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

Сервис deviceponsive

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

На главной странице есть окошко для вставки адреса сайта.

Вставляем адрес и нажимаем кнопку «Go» и ждем, пока загрузится страница.

Сервис deviceponsive

Далее, прокручиваем вниз и первое устройство, которое мы видим, это MacBook с разрешением 1280х800 пикселей. Здесь мы так же можем прокручивать страницу, кликать на нужных элементах, и проверить адаптивность.

Прокручиваем ниже, и смотрим, как выглядит сайт на других устройствах.
Здесь мы можем проверить адаптивность, на экранах начиная от 1280х800 пикселей и заканчивая 320х240 пикселей.

проверка адаптивности на разных разрешениях

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

Сервис responsinator.com

На сайте responsinator.com в самом верху есть окошко для вставки ссылки. Вставляем адрес и нажимаем «Go». Ждем, пока загрузится страница, а затем, аналогично предыдущему сервису, просматриваем, как выглядит наш сайт.

responsinator

На этом сервисе подписана ширина экрана каждого из устройств, и таких устройств здесь достаточно много.

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

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

Помимо этих трех онлайн-сервисов мы так же можем воспользоваться стандартным функционалом браузеров что бы проверить адаптивный дизайн. Я сейчас покажу вам, как это будет на примере браузера Mozilla Firefox.

Проверить сайт на адаптивность при помощи браузера Mozilla Firefox

Здесь, для того, что бы проверить адаптивность, нам необходимо:

  1. 1.В правом верхнем углу нажать на иконку меню.
  2. 2.Затем выбрать здесь раздел «Разработка» => «Адаптивный дизайн».
    Проверка адаптивности в Mozilla Firefox
  3. 3.После чего у нас окошко немножко изменится. В верхнем левом углу отображается разрешение области, и дальше мы эту область можем, при помощи маркеров, уменьшать, увеличивать, изменять ее пропорции и смотреть, на какой ширине как у нас отображается те или иные элемент.
  4. 4.Так же мы можем здесь вводить разрешение в ручную. Например, если мы хотим увидеть, как будет выглядеть наш сайт при разрешении 320х480, мы вводим нужное значение и нажимаем «Enter».
    Задать разрешение в ручную

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

Проверить адаптивность в браузере Google Chrome

Адаптивный дизайн можно проверить и в браузере Google Chrome. Открывается он аналогично:

  1. 1.В правом верхнем углу кликаем на иконку меню.
  2. 2.Здесь выбираем раздел «Дополнительные инструменты» и далее выбираем раздел «Инструменты разработчика».
    Адаптивность в Google Chrome
  3. 3.В нижней или в правой части экрана у вас появиться панель, на которой нам необходимо нажать на кнопку с изображением мобильных телефонов.
  4. 4.Далее, мы можем эту панель немножко опустить вниз. Для этого наводим курсор на границу, зажимаем левую кнопку мышки и протягиваем ниже.
  5. 5.Здесь вы аналогичным образом можете увеличивать или уменьшать ширину экрана.
    Изменение разрешения в Google Chrome

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

Так же здесь вы сразу же можете изменить ориентацию экрана при помощи кнопки «Rotate».

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

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

Поэтому при проверке адаптивности я больше ориентируюсь на браузер Mozilla Firefox.

Видеоинструкция

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

С уважением Юлия Гусарь

Подписаться на рассылку

Читайте также:

comments powered by HyperComments

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

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

https://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
https://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
https://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
https://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
https://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
https://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
https://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
https://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
https://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
https://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
https://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
https://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
https://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
https://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
https://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
https://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
https://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif