Library contents

Page contents

Design considerations for Windows Phone 8.1

Windows Runtime XAML on Windows Phone 8.1 apps need to cope with a diverse set of display sizes and resolutions.

Figure 1. Different screen sizes and resolutions.

To avoid multiple separate designs, there is a scale factor introduced that can be used. The platform calculates the scale factor automatically. So, when designing, you shouldn’t worry about the "raw" pixels anymore but consider the "view" pixels, i.e. "raw" pixels divided by the scale factor.

Figure 2. "Raw" pixels vs. "view" pixels.

The Windows Phone emulator supports different screen sizes (in both physical and pixel size) - use it to test your design.

Note: There are three variants of the navigation bar on Lumia devices running Windows Phone 8.1; capacitive buttons (as in most Lumia phones, e.g. Lumia 930); fixed on-screen (always visible, e.g. Lumia 530 and Lumia 630); and dynamic on-screen (the user can hide or show the navigation bar by swiping, e.g. Lumia 730). The dynamic on-screen navigation bar may have an effect on how your application looks and behaves, because the available screen size depends on whether the navigation bar is visible or not. We recommend that you test your app to make sure that the user experience is flawless. Guidance on how to adapt the layout of your app to a navigation bar can be found from Layout and the Windows Phone navigation bar (MSDN).

What does an app need to do?

Provide bitmap images to work with the scaling system; the system uses scale factor to define which resource to bring in. If there is no exact match, the next best scale factor will be used.