Огромная фотография на компьютере
Минимальная высота 720 px создает почти полноэкранную сцену. Ограничьте контейнер и сравните фото и текст в двух колонках. Проверьте sizes и мобильное кадрирование: сжатие файла не исправляет композицию.
Подробные практические руководства
Как находить несогласованности адаптивной верстки
Проверка заголовков, колонок, отступов и фотографий с точки зрения чтения: методика для широких экранов, смартфонов и каждого языка.
Обновление :
Клавиши с несколькими наборами символов. Фотография для документального контекста; она не изображает проект или оборудование Alexis Roux ZG. © Alexander-design · Источник · CC0. Размер изменен, формат WebP; при отображении применяется кадрирование.
Где верстка мешает прочитать информацию или выполнить действие?
Отсутствие переполнения не гарантирует сбалансированную композицию. Огромный заголовок, три карточки в четырех узких колонках или крупная фотография могут скрыть полезную информацию. Свяжите дефект с правилом CSS, исправьте компонент и проверьте все использующие его страницы. Предложенные ширины — рабочая матрица, а не универсальный стандарт.
Составить матрицу
Включите главную, раздел, длинную карточку, результаты, форму и инструмент. Проверьте 320, 390, 768, 1024, 1440 и 1920 CSS-пикселей, постепенно меняя ширину между ними. Добавьте длинные заголовки и все письменности: дефект между контрольными точками легко пропустить.
Изучить каскад
Запишите вычисленный размер шрифта, интервал, ширину, padding, margin и минимальную высоту в инструментах браузера. Найдите примененное правило и его специфичность. Общее исправление h2 может не затронуть более точный селектор. Проверьте варианты компонента.
Восстановить иерархию чтения
Сопоставьте заголовок, вводный текст, подзаголовки и карточки. Проверьте переносы и размещение действия. Ограничьте размеры и адаптируйте интервалы к письменности. Уберите фиксированные высоты, оставляющие пустоту с коротким текстом или обрезающие длинный перевод.
Проверить колонки
Изучите группы из трех, четырех и пяти карточек с настоящим содержимым. Переходите к одной колонке до чрезмерного сужения абзацев. Проверьте длинные URL и поля. Для таблиц, требующих двух измерений, сохраните явно обозначенную локальную прокрутку.
Проверить фотографии
Измерьте блок и пропорции, затем currentSrc и переданные байты. sizes описывает занятое место: полстраницы не равны всему экрану. Проверьте сохранность важного объекта при кадрировании, резервирование размеров и отложенную загрузку ниже первого экрана.
Повторить масштаб и действия
Проверьте чтение при 200 % и перераспределение при 400 % на подходящем экране. Пройдите меню, FAQ и поля клавиатурой. Проверьте фокус и порядок. В арабской версии изучите выравнивание, направленные значки и латинские строки. Сохраните результат по URL, языку и ширине.
Ситуации и решения
Типовые ситуации для подготовки проверки. Они не описывают выполненные проекты или реальные наблюдения.
Три карточки в четырех колонках
Четвертая полоса пустует, абзацы узкие. Настройте сетку и повторите три, четыре и пять элементов с самыми длинными русскими и финскими заголовками.
Визуально правильная форма
Закрепленный баннер может закрыть фокус, а ошибка появиться далеко от поля. Проверьте отказ и восстановление клавиатурой. Выравнивание не доказывает возможность выполнить действие.
Что сохранить
- URL, язык, ширина CSS, масштаб, браузер и состояние панели.
- Снимок дефекта и ответственные вычисленные правила.
- Сопоставимый снимок после исправления и результат действия.
- Повторно проверенные шаблоны и переводы; оставшиеся дефекты отдельно от подтвержденных исправлений.
Официальные источники
Связанные протоколы
Проверки перед выводом
- Сохраняют ли отфильтрованная карточка, длинный перевод заголовка и форма с ошибкой согласованные колонки и отступы?
- Соответствует ли выбранный браузером файл фотографии её ширине без ненужной загрузки самого большого варианта?
- Позволяют ли масштабирование и клавиатура читать и действовать без текста, скрытого закреплённым элементом?
Частые вопросы
Отдельная точка для каждого телефона?
Выбирайте точки, где перестает работать содержимое. Модели дополняют матрицу, но не оправдывают произвольное умножение правил.
Всегда ли достаточно 16 px?
Нет. Гарнитура, контраст, интервалы, длина строки и масштаб действуют совместно. Проверяйте настоящий текст и его читателей.
Можно ли скрыть блок на телефоне?
Только если необходимая информация остается доступной. Обычно лучше перестроить сравнение или форму, чем убрать пояснения.
Почему каждый язык?
Меняются длина, письменность, переносы и направление. Французский шаблон может сломаться с финским заголовком или латинским адресом в арабском тексте.