meta “viewport” device-width: Wrong width small on

问题:

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 480x800, 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

回答1:

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.

回答2:

I know this is an old question but it might help someone. In this article there is a section about support for the viewport meta tag in Opera Mobile 9.7: http://dev.opera.com/articles/view/opera-mobile-9-7-features-standards/ The attributes user-scalable, minimum-scale and maximum-scale are not supported but width, height and initial-scale should be. If it's not working well, you could always try using CSS media queries. There's a description and example in the same article.

回答3:

take a look at: http://www.quirksmode.org/mobile/viewports2.html entering a world of pain :)

回答4:

Have you tried the HandleFriendly tag?

Works on BB and indicates you have designed code for small screen

回答5:

Have a look at PPK's Quirksmode.org mobile site. Heaps of info, plus compatibility tables!