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

Рассмотрим на примере моего сайта.
Кликнете в любом месте сайта правой кнопкой
Выберете пункт «Посмотреть код»

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

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

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

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

Голова не кружиться от успеха? Теперь мы идем и проверям все страницы своего сайта. Необходимый минимум адаптации, это экраны под ширину 320 пикселей. После можно сайт как минимум под планшет адаптировать. Но вообще по красоте адаптировать под 6 экранов и тогда любой посетитель вашего сайта вам скажет спасибо.

Популярные посты