I'm wondering why, on my Android (HTC Incredible 2), my website I just published renders zoomed in / scaled initially? While on iPhone / iOS - it renders taking the width and the same as on desktop.
I've built the website on top of the Wordpress Twenty Eleven Theme (http://wordpress.org/extend/themes/twentyeleven) - so it has their META still in tact. But I hadn't seen any with an initial scale / zoom in place; I did see a fit width meta. EG <meta name="viewport" content="width=device-width" />
Is this a preference per my browser within my device that's taking this site this way with the META in place? Is it taking the width per a browser setting, then doing it again view the meta? ..creating my initial zoom?
Suggestions?
There are three density categories for Android, by default the target density is set to medium. The default setting effectively zooms in a page.
To prevent the Android viewport from scaling (zooming in) you can set the viewport density to the device API's.
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" />
Targeting device density via CSS
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" href="hdpi.css" />
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.0)" href="mdpi.css" />
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 0.75)" href="ldpi.css" />
Source: http://developer.android.com/guide/webapps/targeting.html#ViewportScale
Above examples were taking from the source link above.