Windows scales applications 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.
User experience guidelines for scaling
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 a scale percentage:
- 100% when no scaling is applied
- 140% for 1920 x 1080 devices that have a minimum DPI of 174
- 180% for 2560 x 1440 devices that have a minimum DPI of 240
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.
You don't have to do anything to get scaling for your app, but you do need to follow the guidelines in this topic to ensure your app looks great when scaled.
| Do | Use scalable vector graphics Use SVG for JavaScript apps and XAML for C#/C++/VB apps. Windows scales these formats for you automatically, without noticeable artifacts. |
|---|---|
|
Use resource loading for bitmap images in the app package For bitmap images stored in the app package, provide a separate image for each scale (100%, 140%, and 180%), and name your image files using the "scale" naming convention described below. Windows loads the right image for the current scale automatically. Save multiple versions of the image using a file name or folder naming convention. Option #1 - File naming convention: ...\test.scale-100.jpg \test.scale-140.jpg \test.scale-180.jpg Option #2 - Folder naming convention: ...\scale-100\test.jpg \scale-140\test.jpg \scale-180\test.jpg In markup, specify images without using the naming convention. | |
Use the resolution media query for remote web images
If your application is a JavaScript app and you have a remote web image, use the CSS @media min-resolution media query with a background-image to replace images at runtime.
/* CSS - Load a remote image depending on the scale percentage */
@media all and (max-resolution: 134dpi){
/* Load 100% image when scaled by 100% */
.imageBackground {
background-image: url('http://www.fabrikam.com/foo.png?s=100');
}
}
@media all and (min-resolution: 135dpi) {
/* Load 140% image when scaled by 140% */
.imageBackground {
background-image: url('http://www.fabrikam.com/foo.png?s=140');
}
}
@media all and (min-resolution: 174dpi) {
/* Load 180% image when scaled by 180% */
.imageBackground {
background-image: url('http://www.fabrikam.com/foo.png?s=180');
}
}
For a Windows Store app built for Windows using C++, C#, or Visual Basic app that uses remote web images, you need to query the DisplayProperties.ResolutionScale property to determine which remote web image to load. For example: <Image Grid.Row="0" Grid.Column="2" x:Name="testRemoteWebImage" Margin="2,2,2,2"/> // Manually load different versions of the image based on the scaling factors. void LoadRemoteWebImage() { switch (DisplayProperties.ResolutionScale) { case ResolutionScale.Scale100Percent: testRemoteWebImage.Source = new BitmapImage(new Uri(testRemoteWebImage.BaseUri, "http://www.fabrikam.com/foo.png?s=100")); break; case ResolutionScale.Scale140Percent: testRemoteWebImage.Source = new BitmapImage(new Uri(testRemoteWebImage.BaseUri, "http://www.fabrikam.com/foo.png?s=140 ")); break; case ResolutionScale.Scale180Percent: testRemoteWebImage.Source = new BitmapImage(new Uri(testRemoteWebImage.BaseUri, "http://www.fabrikam.com/foo.png?s=180 ")); break; default: throw new Exception("Unknown Scaling Factor"); } } | |
| Use the File Access Thumbnail APIs for user images on the file system If your application loads user images from the file system, you should use the File Access Thumbnail API which automatically retrieves a thumbnail for files on the file system that corresponds to the current scale. | |
| Manually load images based upon scale percentage at runtime If your application is loading images at runtime using code, use the Windows Runtime API to determine the scale and manually load images based upon scale percentage. | |
| Specify width and height for your images You should ensure to 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 Where possible, you should use the typographic grid-defined sizes of 20px for major grid-units, and 5px for minor grid-units, to ensure that layouts to not experience pixel shifting due to pixel rounding. Any sized unit that is divisible by 5px will not experience pixel rounding. |
Developers should avoid the following.
| Don't | Don't use smaller images that are scaled up Because images are scaled by default, images look blurry at 140% scale on HD slates 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 slates. 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%. . |
Security considerations
The following articles provide guidance for writing secure C++ code.
Related topics
Build date: 11/28/2012
