<ol> <li>What browsers support this meta tag?</li> <li>How do i use it?</li> <li>Does this mean it will solve all my mobile resizing problems?</li> </ol> If anyone could answer this it would be a great help to newbies learning <pre class="prettyprint"><code><meta="viewport"> </code></pre>

<ol> <li>The viewport browser support is a little bit across the board. I'll point you to the Quirksmode page for viewport browser support for the full details.</li> <li>You use the viewport meta tag like any other meta tag. Put the code block straight up in the <code><head></code>.</li> <li>Pretty much, but again, a little bit of a mouthful to say here. I'd advise reading some articles, reading the W3 mobile best practices for web design, or the current W3 draft specifications on the viewport attribute for the <code><meta></code> tag.</li> </ol> In short, adding this line to a website that should implement viewport scaling should fix most problems. (copied from WebDesignTuts+'s "Quick Tip: Don't Forget the Viewport Meta Tag" article) <pre class="prettyprint"><code><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"></code></pre> <hr> P.S. Quirksmode also has a rather wonderful article describing the issue that's worth reading to understand why this might be helpful.

Another article about meta viewport, its various properties, and how to use it in your designs is http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/ There's also a slidedeck explaining things in detail and a Github repo to go with it. Disclaimer: I'm the author of these resources.

How is the meta viewport tag used, and what does it do?

Tags:

html

meta-tags

viewport

What browsers support this meta tag?
How do i use it?
Does this mean it will solve all my mobile resizing problems?

If anyone could answer this it would be a great help to newbies learning

<meta="viewport">

299

asked Jun 05 '12 06:06

Kyle Yeo

2 Answers

The viewport browser support is a little bit across the board. I'll point you to the Quirksmode page for viewport browser support for the full details.
You use the viewport meta tag like any other meta tag. Put the code block straight up in the <head>.
Pretty much, but again, a little bit of a mouthful to say here. I'd advise reading some articles, reading the W3 mobile best practices for web design, or the current W3 draft specifications on the viewport attribute for the <meta> tag.

In short, adding this line to a website that should implement viewport scaling should fix most problems. (copied from WebDesignTuts+'s "Quick Tip: Don't Forget the Viewport Meta Tag" article)

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

P.S. Quirksmode also has a rather wonderful article describing the issue that's worth reading to understand why this might be helpful.

129

answered Sep 20 '22 14:09

Nightfirecat

Another article about meta viewport, its various properties, and how to use it in your designs is http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/

There's also a slidedeck explaining things in detail and a Github repo to go with it.

Disclaimer: I'm the author of these resources.

answered Sep 22 '22 14:09

andreasbovens

Related questions
                            
                                JQuery ajax progress via xhr
                            
                                Easiest way to mask characters in HTML(5) text input
                            
                                Can I use HTML5 data-* attributes as boolean attributes? [duplicate]
                            
                                Measuring text width/height without rendering
                            
                                Does google maps javascript api-key (v3) need to be kept secret in HTML checked into github and if so, how?
                            
                                Good practices for writing HTML in Javascript
                            
                                Portable MongoDB? [closed]
                            
                                Position fixed not working in mobile browser
                            
                                What purpose do sizcache and sizset serve in jQuery
                            
                                What is the best way to get an element's tag name in JS?
                            
                                Class or ID on Body Tag
                            
                                Best way to test a webdesign for IE on a Mac? [closed]
                            
                                CSS replacement for <div align="center">
                            
                                Spring MVC Multiple ModelAttribute On the Same Form
                            
                                document.createElement('script') vs <script src="">
                            
                                How to prevent a background image flickering on change
                            
                                Why is there a default margin on the <body> element? [closed]
                            
                                HTML5 geolocation vs Google Maps Geolocation api
                            
                                CSS - a:visited:hover?
                            
                                How to "enable" HTML5 elements in IE 8 that were inserted by AJAX call?

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!

Donate Us With