After the theory, first wrong solution, here comes the second wrong solution. It's easier one and the JavaScript is used only for iPhone-s where it was also tested. The problem with iPhone 3 and 4 is that both hardware versions are using the same OS and because of that the same user-agent string. So there is no way of knowing which resolution does the device have when the HTTP request comes to the server.
Following two meta viewport tags works fine for all phones besides the iPhone. The first one is when scaling should be disabled, the other when enabled.
<meta name="viewport" content="width=device-width, minimum-scale=0.5, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi"/>
<meta name="viewport" content="width=device-width, minimum-scale=0.5, maximum-scale=3.0, user-scalable=yes, target-densitydpi=device-dpi"/>
To get the native resolution for the iPhone 4 I had to create a JavaScript that detects 320px vs 640px resolution, sets the cookie and makes a refresh while setting the url parameter so that it also works when cookies are disabled. Then our server-side code has to resize the images properly and update the "width=640" in the viewport meta tag. Still a little complex, right? But works! :-)
Now what are the problems.The fonts can get pretty small as iPhone 4 applies the 0.5 scale and the Androids with high resolution uses the high-densitydpi. And it doesn't work so well for Opera too.
Here is the JavaScript code (much less lines then the previous one):
Leave a comment