PhoneGap: Remember the DPI

If you have gotten around to using PhoneGap for developing mobile applications now, you have probably gotten an UI that you are satisfied with. However, have you tried launching the application on a different device? ( NO LONGER NEEDED )

This solution is no longer needed ( for Android devices  at least ). “Support for target-densitydpi in the viewport meta tag was recently removed from WebKit and with Chrome for Android moving forward to current revisions on WebKit, this change is now rolling out in Android. “.

See https://developer.chrome.com/multidevice/webview/pixelperfect

Mobile phones gets higher and higher resolutions on their small screens these days, for instance 720p on a 4” device. This increases the DPI of the monitor, and is something that we have to take into account when you create an application.

You can detect what the “Pixel Aspect Ratio” of the device using the “viewport” tag in HTML, as well as using JavaScript. This is useful to get the right dpi setting for your application, and perhaps use the right settings for the separate dpi values.

Medium Pixel Ratio

If you test your application on the computer while you are working with the HTML and CSS, you are viewing the application (most likely) in medium pixel ratio. This is how (most) computer monitors view the website, but Samsung Galaxy S II would view the website in a higher pixel ratio (if configured right).

Why is this a problem? Well, if you do not have the right pixel ratio for the application, one pixel would not be one pixel. If you for example used a 1px border, the border you view on the telephone might be 2px instead of one – and this can be noticeable. If you have several borders in a row, some of them might visually be 1px while others might differ.

Viewport to the rescue!

To set the application to show in the DPI setting that the device has, you can use the “viewport” tag in the head section of your HTML. This ensures that (if detectable) your application will look as sharp as it possibly can on the device. In order to achieve this, include the following code in your viewport tag:

target-densityDpi=device-dpi

It might also be beneficial to also use the default width of the device for your application, as well as setting the maximum scale of the application – and not allow the user to scale the application. Which means the entire viewport tag would be as follows:

<meta name='viewport' content='width=device-width, maximum-scale=1.0, user-scalable=no, target-densityDpi=device-dpi'>

Detecting with JavaScript

If you would like to detect the pixel ratio using JavaScript you can do that as well. Using this method you can (for example) load the correct CSS stylesheet for each of the DPI values. Do remember pictures as well though.

var pixelRatio = window.devicePixelRatio;
if(pixelRatio >= 2) {
	// pixelratio 2 or above – Extra high DPI
} else if (pixelRatio >= 1.5) {
	// Pixelratio 1.5 or above – High DPI
} else if (pixelRatio <= 0.75) {
	// Pixelratio 0.75 or less – Low DPI
} else {
	// Pixelratio 1 or undetected. – Medium DPI
}