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

Hardwick

i have an htc hd2, but i always get 960 for width! i tried window.screen.width and i get 480, always! and height is always 800 no matter what, is that a bug?! – Derbent

today i tried: document.body.offsetWidth while setting viewport meta tag to 240, i got 236! yepeee, but i still dont get an accurate height value unless the page is empty – Derbent

somthing new i tried today, in C# Request.Browser.ScreenPixelsWidth.ToString() returns 640! and i thought i could make use of it to distinguish certain screens but naaah! – Derbent

Did you add the mobile.browser file to your project? Also, There is a new Mobile .NET MVC alternative witch replaces the old mobile initiatives from Microsoft... – Mistake

Jan, could you please give me a link to that .NET MVC alternative, as I'm using MVC heavily right now anyways. – Hardwick

Answer 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.

Platinumblond

Answer 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.

Aircondition

Answer 3

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

Arrant

Answer 4

Have you tried the HandleFriendly tag?

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

Mekka

Pretty sure you meant HandheldFriendly. – Raseda

Answer 5

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

Prescott

PPK is proof that mobile is an epic pain to develop for right now :) – Judaica