Guidelines for scaling to pixel density (Windows Store apps)
Windows scales apps to ensure consistent physical sizes for UI elements regardless of the pixel density of the screen. This topic outlines how to build an app with a layout and images that look great when scaled.
Without scaling, as the pixel density of a display device increases, the physical sizes of objects on screen get smaller. When UI would otherwise be too small to touch and when text gets too small to read, Windows scales the system and app UI to one of the following scaling plateaus:
- 1.0 (100%, no scaling is applied)
- 1.4 (140% scaling)
- 1.8 (180% scaling)
Windows determines which scaling plateau to use based on the physical screen size, the screen resolution, the DPI of the screen, and form factor. If the screen specifications meet a specific threshold, Windows uses the next higher scaling plateau.
The following table specifies the minimum screen resolution for each plateau.
|Scaling plateau||Minimum screen resolution|
Important The images that you provide must not exceed 1024x1024 pixels and must not be more than 200 KB.
Save multiple versions of the image using a file name or folder naming convention.
Note For the Logo and WideLogo images specified in the manifest, you can specify an additional 80% scale percentage. For best results, provide four scales of these images.
The Scaling according to DPI sample shows how to use resource loading for images.
- Manually load images based upon scale percentage at runtime If your app is loading images at runtime using code, for example if you use DirectX directly, not XAML or HTML to create your UI, use the DisplayProperties.ResolutionScale property to determine the scale and manually load images based upon scale percentage.
- Use the File Access Thumbnail APIs for user images on the file system If your app loads user images from the file system, you can let users see previews of those files as they browse by displaying thumbnail images. Use the thumbnail API to automatically retrieve a thumbnail image that is optimized for the type of file. For more information about using thumbnails, see Guidelines for thumbnails.
- Specify width and height for your images Specify a width and height on images instead of using auto sizing for images to prevent layouts from changing when larger images are loaded.
- Use typographic grid-units and sub-units Use the typographic grid-defined sizes of 20px for major grid-units, and 5px for minor grid-units, to ensure that layouts do not experience pixel shifting due to pixel rounding. Any sized unit that is divisible by 5px will not experience pixel rounding.
- Don't use smaller images that are scaled up Because images are scaled by default, images look blurry at 140% scale on HD tablets if only 100% scale images are available. You should ensure that your images look great on the higher 140% scale using the above guidance.
- Don’t use larger images that are scaled down Larger images that are scaled down show scaling artifacts and jagged edges on standard tablets. Photographs are the only exception as they can look good when scaled down. You should ensure that your images look great on the 100% scale using the above guidance.
- Avoid specifying sizes that aren't multiples of 5px Units that aren't multiples of 5px can experience pixel shifting when scaled to 140% and 180%.
- App images
- QuickStart: Managing user- and device-specific UI resources
- Tile image sizes
- Touch design interactions
- Guidelines for fonts
- Guidelines for window sizes and scaling to screens