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


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

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

Очень часто владельцы и начинающие разработчики сайтов задаются вопросом: как проверить адаптивность сайта? Давайте разберемся вместе.

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

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

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

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

Но если Вы не пользуетесь браузером Google, то Вы можете воспользоваться онлайн сервисом. К примеру,  http://quirktools.com/screenfly/

Сервис до безобразия прост. Вам нужно вставить ссылку в соответствующее поле и нажать кнопку "Go". В выпадающем меню Вы найдете все доступные устройства. Должен заметить, что по возможностям сервис явно уступает возможностям браузера Chrome. Это не говоря о том, что ни один online сервис, по вполне понятным причинам, не дает возможности тестировать сайт на локальном хостинге. Однако этого сайта достаточно для простой проверки сайта на адаптивность, но говорить о его использовании как о полноценном инструменте отладки не приходится. 


Обнаружив в тексте ошибку, выделите её и нажмите Ctrl + Enter

Вам необходимо создать сайт?

Давайте обсудим все подробности Вашего проекта и сделаем его!


+38(066)60-70-400

chekiley@mail.ru

Напишите нам с сайта