Monthly Archives: May 2012

Viewport Meta Tag

Default Meta Tag

This is the default meta tag required to display the HTML5 app as it is without scaling, i.e. a scale of 1.0.

<meta name="viewport" content=" user-scalable = no, target-densitydpi = device-dpi, initial-scale=1, maximum-scale=1, width=320"/>

Note that we have used ‘device-dpi’ for ‘target-densitydpi’ as the default. Other values are ‘low-dpi’ (120dpi), ‘medium-dpi’ (160dpi), ‘high-dpi’ (240dpi).

Reference: http://darkforge.blogspot.com/2010/05/customize-android-browser-scaling-with.html

window.devicePixelRatio

An app built for the iPhone usually follows the ‘medium-dpi’ setting and if the device-DPI of a phone/tablet is lower than the ‘medium-dpi’, the HTML5 UI will appear larger (scaled up) which is generally acceptable. However, if the device-DPI is higher than the ‘medium-dpi’ that the app is developed based on. The HTML5 app will shrink and look too small compared to the physical screen dimensions, and this is not acceptable. To correct this, we need to set the ‘target-densitydpi’ value from ‘device-dpi’ to ‘medium-dpi’ for devices with higher resolutions.

In Javascript, we can use window.devicePixelRatio for Webkit browsers. A value of 1 is a 1:1 ratio of a virtual pixel to a physical pixel, a value >1 represents a high-density display.

If we do not want our HTML5 app to appear smaller than the DPI that the HTML5 app was designed for, the meta for ‘viewport’ will need to be altered dynamically as below:

if (window.devicePixelRatio>1) { // DPI higher than medium-dpi
var metatags = document.getElementsByTagName('meta');
for(cnt = 0; cnt < metatags.length; cnt++) {
var element = metatags[cnt];
if (element.getAttribute('name') == 'viewport') {
element.setAttribute('content','user-scalable = no,target-densitydpi = medium-dpi,initial-scale=1,maximum-scale=1, width=320');
}
}
}

Reference: http://stackoverflow.com/questions/1230019/how-to-set-viewport-meta-for-iphone-that-handles-rotation-properly´╗┐

Advertisements
Tagged ,