Guidelines for scaling to pixel density

Applies to Windows and Windows Phone

Windows Runtime apps (that run on Windows, Windows Phone, or both) are automatically scaled by the system to ensure consistent readability and functionality regardless of a screen's pixel density. Follow these guidelines to preserve the quality of your app's UI when it is scaled for devices with different pixel densities.

Note  These guidelines don't apply to Windows Phone apps using Silverlight. For Silverlight-specific guidance, see Multi-resolution apps for Windows Phone 8.

Difference in pixel density between a standard and an HD slate

Description

Without scaling, the physical sizes of objects on screen get smaller as the pixel density of a device increases. When UI elements would otherwise be too small to touch or when text would become too small to read, Windows automatically scales your app based on the following scaling plateaus:

Windows Store apps:

  • 1.0 (100%, no scaling is applied)
  • 1.4 (140% scaling)
  • 1.8 (180% scaling)

Windows Phone Store apps:

  • 1.0 (100%, no scaling)
  • 1.4 (140% scaling)
  • 2.4 (240% 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. You can use ResolutionScale (Windows) or RawPixelsPerViewPixel (Windows Phone) to determine scale factor.

Your app will be scaled automatically by the system, but in order to ensure that your UI is crisp and functional regardless of a device's pixel density, use the following guidance to prepare your app for scaling.

Dos and don'ts

  • Use scalable vector graphics. Windows scales these formats for you automatically, without noticeable artifacts. For JavaScript apps, use SVG. You can use XAML-defined graphics in apps using C#, C++, or Visual Basic.
  • Use resource loading for bitmap images in the app package and provide a separate image for each scaling factor. Include the scale factor in the name of your image file (for example, Assets\Square7070Logo.scale-100.png). Note that Windows will automatically load the right image for the current scale. The Scaling according to DPI sample shows how to use resource loading for images.

    For image requirements related to app certification, see Choosing your app images. For details on naming conventions, see Quickstart: Using file or image resources (Windows Store apps using JavaScript and HTML) or Quickstart: Using file or image resources (Windows Store apps using C#/VB/C++ and XAML).

  • When creating your assets for different scaling plateaus:
    • Don't design bitmap images at 100% and manually scale them up. Even if you use a high-quality image program, you'll likely get blurry results.
    • Keep in mind that scaling down a large, high-resolution image won't always produce clean, crisp results. However, if the original vector isn't available, manually scaling down a higher resolution file is better than scaling up from a low-resolution file.
  • If your app is loading images at runtime using code (for example, if you're using DirectX, not XAML or HTML to create your UI), use ResolutionScale (Windows) or RawPixelsPerViewPixel (Windows Phone) to determine the scale and manually load images based upon that scale percentage.
  • Use the Thumbnail APIs for file system images. The thumbnail APIs optimize performance by caching smaller versions of the image for thumbnail use. See Accessing the file system efficiently for details.
  • Specify width and height for your images instead of using auto sizing 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 your layout doesn't experience pixel shifting due to pixel rounding. Any sized unit that is divisible by 5px will not experience pixel rounding.
  • Use the resolution media query for remote web images. If your app uses JavaScript and you have a remote web image, use the CSS @media resolution media feature with the background-image property to replace images at runtime.
  • Don't use images that aren't sized to multiples of 5px. Units that aren't multiples of 5px can experience pixel shifting when scaled to 140%, 180%, and 240%.

Related topics

For designers
Choosing your app images (Windows Store)
Tile image sizes
Touch design interactions
Guidelines for supporting multiple screen sizes
Guidelines for thumbnails
For developers (HTML)
Quickstart: Using file or image resources
resolution media feature
DisplayInformation
ResolutionScale
RawPixelsPerViewPixel
Guidelines for supporting multiple screen sizes
For developers (XAML)
Quickstart: Using file or image resources
DisplayInformation
ResolutionScale
RawPixelsPerViewPixel
Guidelines for supporting multiple screen sizes
Sample
Scaling according to DPI sample

 

 

Show:
© 2014 Microsoft