Using Viewport to create a mobile friendly version

Jack Tyler picture Jack Tyler · Jun 9, 2011 · Viewed 26.1k times · Source

I'm working on a site, but I want a mobile friendly version aswell. I'm a newbie to this.

Someone suggested I should use the following code, to which I can't find many relating question on here:

<meta name="viewport" content="width=320, initial-scale=1">

The problem is that I have no idea how to implement it, and I know that cannot simply convert the whole page.

What I am requesting is some pointers on how I can reach my goal.

Answer

andreasbovens picture andreasbovens · Jun 13, 2011

http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/ gives you an introduction to the various aspects of the viewport meta tag. For optimizations across a range of screen sizes, you probably want to use <meta name="viewport" content="width=device-width"> in combination with media queries (also covered in the article above).

Note that the Element Fusion tutorial you linked to uses semicolon delimiters between viewport values instead of commas - this is not correct. Be sure to use commas, like in your initial example :-)