Размеры экрана и точки останова

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

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

Совет

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

Точки прерывания

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

Точки прерывания для обеспечения отзывчивого дизайна

Класс размера: Точки прерывания Стандартный размер экрана . Размеры окон
Small до 640 пикселей От 20 до 65 дюймов Телевизоры 320x569, 360x640, 480x854
Средний 641 – 1007 пикселей От 7 до 12 дюймов Таблетки 960x540
Крупный 1008 пикселей и более 13 дюймов и более Компьютеры, ноутбуки, Surface Hub 1024x640, 1366x768, 1920x1080

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

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

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

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

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

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

Содержимое масштабируется по-разному на разных устройствах в зависимости от того, насколько далеко пользователь должен находиться от экрана устройства

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

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

Совет

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

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

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

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

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