Metatag viewport tutorial and examples

As i'm learning more about webdesign in the mobile universe, i like to share with you my foundings called the meta tag viewport to help webdesigners and webdevelopers to create a good mobile experience.

Today i walked against a problem with my fluid webdesign layout, in the browser everything went fine, but the mobile browser doesn't scale and gives me the desktop version.

      <meta name="viewport" content="width=device-width; 

            initial-scale=1.0; maximum-scale=1.0; user-scalable=false;" />

A tutorial by Building Internet! gave me the anwser in the form of a new meta tag called viewport, that lets you set the scalability/ zoom of your visitors mobile phone to a ratio of  1.0. This causes the browser of your mobile phone to render the website on it's normal pixel (mostly 300 - 320) width instead faking a 980px width of a desktop browser.

More information about this topic can be found in the below articles

• Add a mobile landingpage to your site - Building Internet!
• Detailed explaination of the meta tag viewport - Mozilla
• Choosing a viewport for iPad sites - Antipode

More information about mobile templates and creation your own mobile website is coming soon.

If you need a mobile template or website for yourself you can always contact me, i'm open for projects.