Какие размеры окна браузера тестировать для адаптивного дизайна?

Не существует постоянного списка размеров браузера, гарантирующего адаптивный дизайн. Начните с узких, средних и широких привязок, таких как 390, 820 и 1440 CSS-пикселей, а затем протестируйте сразу ниже и выше каждой точки останова, где изменяется ваш собственный контент. Лучшая точка останова — это место, где макет начинает давать сбой, а не место, где заканчивается конкретная модель телефона.

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

Почему три скриншота — это не три устройства?

Область просмотра CSS — это область, доступная для веб-контента, измеряемая в CSS-пикселях. Это не просто количество физических пикселей, указанное в спецификации устройства. Масштабирование, соотношение пикселей устройства, элементы управления браузером, окна с разделенным экраном, полосы прокрутки и ориентация — все это может изменить доступную область просмотра.

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

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

Что показывает каждое окно просмотра ClockTools?

Живой инструмент ClockTools предлагает три независимо выбираемых захвата:

В результате также сообщается статус ответа, заголовок, H1, канонический URL-адрес, значение robots, размер HTML и время ответа. Такое сочетание полезно, потому что красивый скриншот перенаправленной, заблокированной, неиндексированной или неправильно канонизированной страницы по-прежнему является неудачной проверкой выпуска.

Средство визуализации принимает общедоступные страницы HTTP или HTTPS. Он намеренно отклоняет локальный хост, частные IP-адреса и страницы внутренней сети, поскольку запрос на захват выполняется за пределами вашего устройства. Не отправляйте подписанные ссылки для предварительного просмотра, пароли, токены или конфиденциальные промежуточные URL-адреса.

Как построить прогон точки останова?

Используйте пять проходов вместо того, чтобы собирать огромную матрицу устройств:

1. Начните сужать 320 или 360 пикселей, чтобы выявить предположения о минимальной ширине.

2. Захватите обычный мобильный привязку, например 390 пикселей, и протестируйте взаимодействие с портретом.

3. Медленно двигайтесь шире, пока сам контент не потребует изменения макета; запишите эту ширину.

4. Проверьте один пиксель ниже и один пиксель выше каждой объявленной точки останова, затем повторите действия с длинными метками, ошибками проверки и расширенными меню.

5. Закончите с широкой привязкой рабочего стола, например 1440 пикселей, и одним более широким окном, чтобы уловить неконтролируемую длину строки или растянутый медиафайл.

Для таблицы стилей, которая изменяется на 768 пикселей, пара с высоким значением — это 767 и 768 — это не просто стандартная предустановка для планшета. Если другая сетка изменится на 1024, добавьте 1023 и 1024. Пара ребер показывает разрывы, отклоняющиеся на единицу, и перекрывающиеся правила минимума/максимума.

Укажите высоту, если прикрепленный заголовок, модальное окно, баннер согласия или экранная клавиатура могут занимать вертикальное пространство. Поверните хотя бы одно сенсорное устройство или симулятор. Макет, который соответствует размеру 390 x 844, может по-прежнему не работать при той же ширине с гораздо меньшей доступной высотой.

Какие ошибки адаптивного дизайна следует исправить в первую очередь?

Расставьте приоритеты по тому, сможет ли пользователь выполнить основную задачу страницы:

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

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

Когда вам понадобится настоящее устройство?

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

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

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