March 14 2013
Windows DPI Scaling.pdf (336.59 KB)
In 2013, the industry is moving towards using high resolution, high DPI screens on Windows devices. Today, most tablets have 1366x768 resolution screens between 10 and 11 inches. Soon, however, you’ll be seeing devices with the same size screens with 1080p and 1440p resolution, resulting in a much higher DPI. Microsoft’s Surface* Pro tablet is one such device, utilizing a 1080p 10.6” screen. Windows is designed to scale existing applications according to the screen resolution, but developers still need to do a few things, depending on the type of application (desktop or Windows Store), to make sure their applications scale properly.
DPI Scaling on the Desktop
Windows has different methods of scaling desktop applications from Windows Store apps. For the Windows desktop, there are 4 different levels of scaling: 100%, 125%, 150%, and 200%. For reference, Microsoft’s Surface Pro uses a 1080p 10.6” display and by default, sets its desktop scaling to 150%.
To take full advantage of DPI scaling, you need to make your application DPI aware. If not, Windows will automatically scale the application to the appropriate size; however, the application will appear blurry (see figure 1 below). Declaring your application to be DPI aware is the best way to ensure your applications are scaled in such a way that images and text remain crisp and sharp when scaled to a higher DPI.
Figure 1. 200% scaling. Internet Explorer* (left) is DPI aware. Chrome* (right) is not.
When making an application DPI aware, you must make sure that your application’s UI scales appropriately. This involves providing higher resolution assets, as well as checking that the text and text containers are scaled appropriately. It is recommended that you test your applications under high DPI situations. The easiest way to do this is by changing the display scaling settings in the Control Panel display settings, as shown in figure 2 below.
Figure 2. DPI scaling for testing desktop applications can be changed in the Windows* Control Panel.
For more information, refer to Microsoft’s MSDN documentation on high DPI desktop applications: http://msdn.microsoft.com/en-us/library/dd464646.aspx
Scaling on Windows Store Apps
Windows Store apps handle scaling differently. All applications are automatically scaled to the proper size. Unlike on the desktop, the Windows 8 UI supports 100%, 140%, and 180% scaling modes. Text, images, and the rest of the UI are automatically scaled to the proper size on displays with high DPI, without any interaction from the developer.
However, for the application to look its best, you need to provide higher resolution images for when the 140% and 180% scaling modes are used. An alternative is to use scalable vector graphics, in which case Windows will automatically scale the images to the proper resolution, while preserving image quality.
To ensure the application is rendered properly at different DPIs, it is recommended that you test your applications using the simulator in Visual Studio* 2012. You can then test different DPI settings by changing the simulated screen size and resolution (see figures 3 & 4).
Figure 3. The simulator can be invoked from within Visual Studio* 2012 on Windows* 8
Figure 4. DPI can be changed by selecting a different screen size and resolution from the settings on the right-hand side of the simulator.
For more information on enabling display scaling for Windows Store apps, see Microsoft’s MSDN article: http://msdn.microsoft.com/en-us/library/windows/apps/hh465362.aspx
It is recommended that you test your applications in high DPI environments to ensure that they function properly and are rendered with the proper visual clarity. Desktop applications can be tested by changing the display scaling in the Control Panel, while Windows Store Apps can be tested using the simulator. If you encounter any issues when running at higher DPIs, refer to Microsoft’s MSDN documentation.