meta "viewport" device-width: Wrong width small on Opera Mobile 9.7 (10 works)

Question

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

Answer 1

Have you tried the HandleFriendly tag?

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

Answer 2

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

Answer 3

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.