Размеры экрана и контрольные точки

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

  • небольшая (менее 640 пикселей);
  • средняя (641–1007 пикселей);
  • большая (1008 пикселей и более).

Совет

При разработке для определённых точек останова ориентируйтесь на объём экранного пространства, доступного вашему приложению (то есть на окно приложения), а не на физический размер экрана. Когда приложение запускается в полноэкранном режиме, окно приложения соответствует размеру экрана. Если это не так, окно меньше, чем экран.

Точки останова

В таблице ниже описаны различные классы размера и точки прерывания.

Контрольные точки адаптивного дизайна

Класс размера Точки останова Типичный размер экрана Устройства Размеры окна
Небольшой до 640 пикселей 20" до 65" Телевизоры 480x854, 540x960
Средняя 641 - 1007px 7" до 12" Планшеты 960x540
Большой 1008px и вверх 13" и вверх Компьютеры, ноутбуки, Surface Hub 1024x640, 1366x768, 1920x1080

Почему телевизоры считаются "небольшими"?

Большинство телевизоров физически большие (40–65 дюймов распространены) и имеют высокие разрешения (HD или 4K). Тем не менее, проектирование для телевизора 1080p, которое вы просматриваете с 10 футов, отличается от проектирования для монитора 1080p на вашем столе. При учете расстояния просмотра телевизор 1080 пикселей больше похож на 540-пиксельный монитор, который гораздо ближе.

Эффективная система пикселей XAML автоматически учитывает расстояние просмотра. При указании размера элемента управления или диапазона точек останова используйте эффективные пиксели. Например, если вы создаёте адаптивный код для экранов шириной 1080 пикселей и более, монитор 1080p будет использовать этот код, а телевизор с разрешением 1080p — нет, потому что, хотя у телевизора 1080 физических пикселей, эффективных пикселей у него только 540. Это делает проектирование телевизора похожим на проектирование для небольшого экрана.

Эффективные пиксели и коэффициент масштабирования

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

При запуске приложения на устройстве система использует алгоритм для нормализации отображения элементов пользовательского интерфейса на экране. Этот алгоритм масштабирования учитывает расстояние просмотра и плотность экрана (пиксели на дюйм) для оптимизации предполагаемого размера, а не физического размера. Алгоритм гарантирует, что шрифт размером 24 пикселей на большом экране 10 футов от него так же удобочитаем, как 24 пикселей шрифта на небольшом экране в нескольких дюймах.

Схема, показывающая, как содержимое масштабируется по-разному на устройствах на разных расстояниях просмотра.

При разработке XAML-приложения вы оперируете эффективными пикселями, а не реальными физическими пикселями. Эффективные пиксели (epx) — это виртуальная единица измерения, используемая для выражения измерений макета и интервалов, независимо от плотности экрана. (В наших рекомендациях обозначения epx, ep и px взаимозаменяемы.)

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

Совет

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

Кратные четырём

Изображение размером 4 epx, масштабируемое до множества размеров без дробных пикселей.

Размеры, поля и положение элементов пользовательского интерфейса в ваших приложениях XAML всегда должны быть кратны 4 epx.

XAML масштабируется на различных устройствах с уровнями масштабирования 100%, 125%, 150%, 175%, 200%, 225%, 250%, 300%, 350% и 400%. Базовая единица составляет 4, так как она масштабируется до этих плато в целом (например, 4 × 125% = 5, 4 × 150% = 6). Использование значений, кратных четырём, позволяет выровнять все элементы интерфейса по целым пикселям и обеспечивает чёткие, резкие границы. (Текст не имеет этого требования; текст может иметь любой размер и положение.)

  • Last updated on