Tamaños de pantalla y puntos de interrupción

Las aplicaciones de Windows se pueden ejecutar en cualquier dispositivo que ejecute Windows, lo que incluye tabletas, escritorios, televisores, etc. Con un gran número de destinos de dispositivo y tamaños de pantalla en todo el ecosistema de Windows, en lugar de optimizar la interfaz de usuario para cada dispositivo, se recomienda diseñar para algunas categorías de ancho clave (también denominadas "puntos de interrupción"):

• Pequeño (menos de 640 píxeles)
• Medio (de 641 a 1007 píxeles)
• Grande (1008 píxeles o más)

Sugerencia

Cuando diseñes para puntos de interrupción específicos, diseña para la cantidad de espacio en pantalla disponible para tu aplicación (ventana de la aplicación), no el tamaño de la pantalla. Cuando la aplicación se ejecuta a pantalla completa, la ventana de la aplicación tiene el mismo tamaño que la pantalla, pero cuando la aplicación no está a pantalla completa, la ventana es menor que la pantalla.

Puntos de interrupción

En esta tabla se describen las distintas clases de tamaño y puntos de interrupción.

Clase Size	Puntos de interrupción	Tamaño de pantalla típico	Dispositivos	Tamaños de ventana
Pequeño	hasta 640px	20" a 65"	TVs	320x569, 360x640, 480x854
Media	641 - 1007px	7" a 12"	Tabletas	960 x 540
grande	1008px y versiones posteriores	13" y arriba	Equipos, portátiles, Surface Hub	1024 x 640, 1366 x 768, 1920 x 1080

¿Por qué los televisores se consideran "pequeños"?

Aunque la mayoría de los televisores son físicamente bastante grandes (de 40 a 65 pulgadas es lo habitual) y tienen resoluciones altas (HD o 4k), el diseño para una televisión de 1080 píxeles que se ve a 3 m de distancia es diferente del diseño de un monitor de 1080 píxeles cuando se está sentado a una distancia de 30 cm en el escritorio. Cuando tienes en cuenta la distancia, los 1080 píxeles de los televisores son más similares al monitor 540 píxeles que está mucho más cerca.

El sistema de píxeles efectivo de XAML toma automáticamente la distancia de visualización en cuenta. Al especificar un tamaño para un control o un intervalo de punto de interrupción, estás usando realmente píxeles "efectivos". Por ejemplo, si crea código dinámico para 1080 píxeles o más, un monitor de 1080 usará ese código, pero un televisor de 1080p no--porque aunque un televisor de 1080p tiene 1080 píxeles físicos, solo tiene 540 píxeles efectivos. Lo que hace que el diseño de un televisor sea similar al diseño de una pantalla pequeña.

Píxeles efectivos y factor de escala

XAML ayuda a ajustar automáticamente los elementos de la interfaz de usuario para que sean legibles y fáciles de interactuar en todos los dispositivos y tamaños de pantalla.

Cuando la aplicación se ejecuta en un dispositivo, el sistema usa un algoritmo para normalizar la forma en que se muestran los elementos de la interfaz de usuario en la pantalla. Este algoritmo de escalado tiene en cuenta la distancia de visualización y la densidad de pantalla (píxeles por pulgada) para optimizar el tamaño percibido (en lugar del tamaño físico). El algoritmo de escalado garantiza que una fuente de 24 px en un dispositivo Surface Hub a 3 metros de distancia sea tan legible para el usuario como una fuente de 24 px en un teléfono de 5 pulgadas a unos centímetros de distancia.

Debido a cómo funciona el sistema de escalado, al diseñar la aplicación XAML, estás diseñando en píxeles efectivos, no en píxeles físicos reales. Los píxeles efectivos (epx) son una unidad de medida virtual y se utilizan para expresar las dimensiones y el espaciado del diseño, con independencia de la densidad de la pantalla. (En nuestras instrucciones, epx, ep y px se usan indistintamente).

Puede omitir la densidad de píxeles y la resolución de pantalla real al diseñar. En su lugar, diseñe para la resolución efectiva (la resolución en píxeles efectivos) para una clase de tamaño (para obtener más información, consulte el artículo Tamaños de pantalla y puntos de interrupción).

Sugerencia

Al crear bocetos de pantalla en programas de edición de imágenes, establezca el VALOR de PPP en 72 y establezca las dimensiones de imagen en la resolución efectiva de la clase de tamaño a la que se dirige.

Múltiplo de cuatro

Los tamaños, los márgenes y las posiciones de los elementos de la interfaz de usuario siempre deberían estar en múltiplos de 4 epx en tus aplicaciones para UWP.

XAML se escala en una gama de dispositivos con niveles de escalado del 100 %, 125 %, 150 %, 175 %, 200 %, 225 %, 250 %, 300 %, 350 % y 400 %. La unidad base es 4 porque se puede escalar a estos niveles como número entero (por ejemplo, 4 x 125 % = 5, 4 x 150 % = 6). Al usar múltiplos de cuatro, se alinean todos los elementos de la interfaz de usuario con píxeles enteros y se garantiza que los elementos de la interfaz de usuario tengan contornos afilados y nítidos. (Ten en cuenta que el texto no tiene este requisito; el texto puede tener cualquier tamaño y posición).