For my current mobile web project I use the meta "viewport" tag to instruct the mobile browser to use a scale of 1:1 with the devices' width:
<meta name="viewport" content="initial-scale=1.0, width=device-width, height=device-height, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
This works on IE mobile, iPhone Safari and even on Opera 10 beta, but it doesn't on Opera 9.7, which is by default installed on HTC HD2. The HTC HD2 got device dimensions of 480×800, so the viewport should get a width of 480 in portrait mode. But appearently Opera mobile 9.7 (and perhaps 9.5 too) sets a wrong width, so after that everything is zoomed in a little. I used a short javascript snippet to inspect the actual window size:
$(window).width() -> returns 274
window.innerWidth -> returns 480
When i hardcode 480 instead of "device-width" everything works correct. Same here for landscape-mode:
$(window).width() -> returns 457
window.innerWidth -> returns 800
Is there any workaround for this?
Greetings
Best Answer
i'm a little late on this but : the viewport meta tag has to be considered as CSS pixels, not physical pixels of your screen. and the ratio between them can be quite different regarding the physical pixel density of the device :
iPhone3 : physical 320x480px / CSS 320x480px => ratio = 1, easy.
iPhone4 : physical 640x960px / CSS 320x480px => ratio = 2, that's what Apple thought of doing when they made pixels twice smaller in the iPhone4 in order to keep sites optimized for 3 working exactly the same on 4.
HTC Desire HD : physical 480x800px / CSS 320x533px => ratio = 1.5 which is probably something near what you're experiencing with HTC HD2.
if you use the width=device-width value for the viewport, my guess is you shouldn't then have a fixed width in your design, but better use widths in %, having in mind that in most (recent) mobile devices your CSS total width will be somewhere around 320px (portrait) or 500px (landscape) at a scale of 1.0.