How to set up the viewport for a BlackBerry WebWorks application for BlackBerry 10

by Retired on ‎10-12-2012 10:53 AM - edited on ‎10-22-2012 09:39 AM by Retired (12,000 Views)

A good web application typically does not allow the user to zoom or scroll unless it is intended to do so by the developer (in elements like lists, grids, etc.). As we initialize our application, we set up the viewport by inserting the following the meta tag into the <head> element:

 

<meta name="viewport" id="viewport" content="initial-scale=1.0,user-scalable=no, maximum-scale=1.0" />

This sets up the viewport so that the user is not allowed to zoom which is ideal.

 

This however is missing a vital piece - target density. Screen densities differ; for example, BlackBerry® 10 Dev Alpha Device has a resolution of 1280 by 768 pixels - 355 pixels per inch (ppi). The BlackBerry® PlayBook™ on the other hand has a resolution of 1024 by 600 with 169 ppi. Non-web developers are familiar with the terms low-dpi and hi-dpi. As mobile screens increase in density, content needs to be adjusted depending on the target density/resolution.

 

Let's take the iPhone® 3 and iPhone® 4 for example - one, with resolution of 320x480, and another of 640x960. The meta tag above will automatically scale to fit the screen on both devices. In fact, WebKit will report the resolution on the iPhone 4 as 320x480, which is the reference resolution that provides a density of about 160dpi. Every css pixel takes up two physical device pixels (hence pixel ratio of 2).

 

This allows the developer to use a single stylesheet, and it will scale all elements to match the ratio. This however means that all raster objects such as photos are scaled up leading to distortion and a poor user experience. Graphics designed for the BlackBerry 10 Dev Alpha Device will look stunning, scale down nicely on the BlackBerry PlayBook, and really make the application stand out.

 

The developer can target the device density and load separate stylesheets and more importantly two sets of images (or a high dpi image that is scaled down on the device with lower resolution.

This method requires the use of target-densitydpi property and media queries to target specific screen resolutions and achieves the best results.

 

Since the target-densitydpi property in WebKit has recently been deprecated, we can adjust the initial-scale property to scale the application so that it maintains a 1 : 1 css pixel to device pixel ratio. This can be done using JavaScript® in the head of the index file:

 

<head>
    <script>
	var meta = document.createElement("meta");
	meta.setAttribute('name','viewport');
	meta.setAttribute('content','initial-scale='+ (1/window.devicePixelRatio) + ',user-scalable=no');
	document.getElementsByTagName('head')[0].appendChild(meta);
   </script>
</head>

This ensures that:

 

1. User is not able to zoom using pinch zoom or double tap.

2. The density of the application matches the density of the device pixel for pixel.

3. Raster content such as images remains crisp, this improves overall user experience.

 

Pixel ratios differ from device to device as follows:

 

Android™ LDPI:  0.75

BlackBerry PlayBook, iPhone 3, and Android MDPI: 1

Android HDPI: 1.5

iPhone 4: 2.0

BlackBerry 10 Dev Alpha Device: 2.2437500953674316

 

(Source: http://www.fiveminutes.eu/targeting-hight-screen-densities-with-css-media-queries/)

 

Calculation is performed as follows:

On the BlackBerry 10 Dev Alpha Device,

 

window.devicePixelRatio returns the current pixel ratio of ~2.24

1 css pixel = 2.24 device pixels.

1 device pixel = 1/2.24 = ~0.446 css pixels.

 

By using initial-scale= 1/window.devicePixelRatio (or 0.446), we scale the viewport so that each css pixel is the same size as the physical device pixel. This really stands out when looking at high-resolution images. 

 

Therefore, a 100 by 100 pixel button on the BlackBerry PlayBook, will need to be rescaled to 100x2.24 = 224 pixels to take up the same screen estate on BlackBerry 10 Dev Alpha Device. This is because we are dealing with much higher pixel density. This applies to any other elements measured in pixels.

 

In order to target specific stylesheets for specific devices, we can use the following media queries:

<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1)" href="css/playbook.css" />
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 2.2437500953674316)" href="css/devAlpha.css" />

 

You can also use ranges that cover other resolutions (in case you want to target a wide range of devices, and want the images/backgrounds to be crisp on each one:

 

<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1) " href="css/ldpi.css" />
<link rel="stylesheet" media="screen and (-webkit-min-device-pixel-ratio: 2)" href="css/hdpi.css" />

 

The first stylesheet will be used on devices with pixel ratio of 1, while the second will target devices with pixel ratio of 2 and above. This includes Apple® devices with retina displays (~326dpi) as well as the higher dpi BB10 Dev Alpha (355dpi). 

 

For more information on targeting various screen densities refer to the following links:

 

http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/ 

http://www.fiveminutes.eu/targeting-hight-screen-densities-with-css-media-queries/

 

http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html

 

http://www.netmagazine.com/tutorials/master-css-pixels-retina-displays

 

http://menacingcloud.com/?c=highPixelDensityDisplays