<meta name="viewport"> - part4

| 3 Comments

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.

3 Comments

Hi Jozef,

Thanks this was very useful for me to manage my web pages design work on different mobile devices.

Hey,

Seriously, thank you sir. You just saved me hours of torment with my friend android sdk.

Thanks Joseph, this was helpful and saved me a lot of time.

Leave a comment

Updates

Subscribe to the blog updates with an email:

If you like it, share it.

Pages

About this Entry

This page contains a single entry by Jozef Kutej published on June 7, 2011 6:53 AM.

<meta name="viewport"> - part3 was the previous entry in this blog.

Spit on the world's paradigms with pointless negativity is the next entry in this blog.

Find recent content on the main index or look in the archives to find all content.