Статьи

Home › News

Проверка адаптивной вёрстки / Responsive design test

23.08.2018

Что это такое?

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

Чтобы всё влезло, переведите браузер в полноэкранный режим клавишей F11.

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

Почему размер отличается от реального количеста пикселей?

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

Размер окна браузера

На  устройствах с ретино-подобными дисплеями показанные размеры будут отличаться от реального разрешения в пикселях, которое указано в спецификации устройства. Смартфоны покажут 320×480 или 480×800 пикселей, планшеты — 1280×800.

Таким образом, для разработчиков важны примерно 3 ключевых мобильных размера: 320, 480 и 800 точек в ширину . 1280 — это уже размер обычной PC-версии. Если остались вопросы, читайте подробнее в  заметке про адаптивный дизайн .