2011-06-07T06:53:43+01:00

<meta name="viewport"> - part4

Theory, fail 1, fail 2 => so now the current (good?) solution. To get to it, I didn't had to develop a new idea, but I had to escape the old idea that the best thing to do for a mobile devices is to send the images in the native screen resolution. This is still true for the older handsets, but not any more for the new age of smart-phones.

The difficulty is not with developing new ideas - but with escaping from the old ones.

It's enough to put following tags to the HTML header:

<meta name="viewport" content="width=640, user-scalable=yes"/>
<meta name="HandheldFriendly" content="true"/>
<meta name="MobileOptimized" content="640"/>

and then just optimize the page for 640px width. This works awesome good for recent devices with recent browsers, or in general the browsers that supports the viewport meta tag. Both image and font-size will be adapted to the screen size and the page will look similar on iPhone 3 or 4, iPad, Android 2.x, new MS phones and Opera browser.

So at $work we will still support the old devices that needs image resizing, for the other companies that doesn't have time, budget or an interest, it might be enough to target the recent smart-phones via 640px optimized pages with a proper viewport tag.