Home > Computers and Internet > Display Resolutions in Windows Phone 8

Display Resolutions in Windows Phone 8

Windows Phone 7 devices have one possible resolution: 480 x 800 pixels (aka. WVGA). Windows Phone 8 devices have three possible resolutions: 480 x 800 (WVGA), 768 x 1280 (WXGA), and 720 x 1280 (720p). With these three resolutions there are two aspect ratios: WVGA and WXGA are 9:15 and 720p is 9:16. To keep a consistent user experience for XAML based apps the layout units used for Windows Phone 8 apps (as well as Windows Phone 7 apps running on Windows Phone 8) are Device-Independent Pixels. This means that the OS will do the appropriate scaling for the app on devices with different screen sizes. This can be very beneficial for hand held devices with small screens. For instance, a button designed to be pressed by a finger, will be the same size for the end user, regardless of the resolution of the device they’re using. With Device-Independent Pixels app developers don’t need to worry about hit targets becoming too small to be hit on high resolution devices.

To see how scene elements behave under the different resolutions I created a Windows Phone 8 app in Blend for Visual Studio with elements that are of interesting sizes. The elements are rectangles which have a number displayed on them, and that number is the value that the rectangles Width property is set to (the vertical rectangles have been rotated 90°). This screen shot shows the app being developed in Blend with the Display combo box set to WVGA. Given that the display resolution is 480 x 800 it is not surprising that the 480 and 800 rectangles stretch across the entire display area of the device, but not beyond it.
Changing the Display resolution to WXGA we can see the Device-Independent Pixels at work. The aspect ratio remains 9:15 so the 480 and 800 rectangles still stretch across the entire display area of the device, even though the display area is 768 x 1280 pixels. The 768 and 1280 rectangles still end way beyond the boundaries of the device display area because all of the elements have been scaled appropriately. Looking in the Display combo box you can see that it shows a scale of 160%. This means that all of the elements on the art board are being scaled by 160%. 480 x 1.6 = 768. The scale is calculated using the Content.ZoomFactor property.

Changing the Display resolution to 720p it is possible to see where XAML app developers may need to take the different device resolutions into consideration. With 720p the aspect ratio is no longer 9:15, it is 9:16. While the 480 rectangle is still scaled to fit the width of the device, the 800 rectangle is no longer tall enough to match the height of the device display area. With an aspect ratio of 9:16 and a scale of 150% it takes an element with a height of 853 to be able to cover the entire height of the device.

Another way to test how apps will look with the different display resolutions can be configured by the Device pane’s Deploy target combo box. For Windows Phone 8 projects the Deploy target can be set to: Device, Emulator WVGA, Emulator WXGA, or Emulator 720P. When you run the project (Project -> Run Project) it will run the app on the target specified by the Deploy target. So if a Windows Phone 8 device is plugged into the computer, and the Deploy target is set to Device, the app will be launched on that device. If an emulator is selected, running the project will result in a Hyper-V guest being started which has Windows Phone 8 as the OS and the desired resolution configured for the display.

  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: