Scaling UI for multiple screen resolutions

Introduction

This article gives an overview of how developers can scale application UI for multiple screen resolutions. MeeGo* supports screen resolutions ranging from 3.67'' to 11.3''. Each of these have different Pixel densities for example a 3.67'' handset has 269 pixels per inch and a 11.3'' one has 135

Here is a list of screen sizes and corresponding PPIs[Pixel per inch]

Diagonal Screen Size PPI
3.67 269
4" 233
4.3" 256
7" 216
10" 119
11.6" 135

Physical vs Pixel

So what is the relation between PPI and scaling UI? UI of an application in most of the cases consists of elements like textboxes, labels, panels and images. The size [height and width] of these elements is defined using pixels
For example if we take a QML example:

Rectangle {
     id: rect
     width: 200
     height: 200
     color: "blue"
}


The above lines of code will make a blue rectangle box of size 200px X 200px. This might look as expected on some devices but on some devices this might be squished/stretched depending on the number of pixels per inch of screens.
For example in a 11.3'' tablet the actual width of this box is 200/135 = ~1.482 inches and on a 3.6'' one it is ~0.77 inches
To tackle this problem without having to make multiple versions of the applications for different screen sizes, application developers can use physical units and target the lowest supported screen(PPI) and allow the system software scale the UI for a given pixel density But how do I declare an element in physical units? MeeGo* UX components has Units and helper functions like "mm2px", "inch2px" and "vp2px"

Rectangle {
 Id:rect
 Units{id:units}
width: units.mm2px(10.0)
height:units.mm2px(10.0)
}

This way physical units can be converted to graphical pixels. Coming to the “web” based apps CSS understands physical units

<html>
<head>
</head>
<style>
    .rect{height:10mm;width:10mm;border:1px solid black}
</style>
<body>
<div class=”rect”></div>
</body>
</html>

The same implementation can be employed even for images. But there is a problem with loosing the quality of the same so, the images should be made with highest possible pixel density. For example: 269 PPI

For more complete information about compiler optimizations, see our Optimization Notice.