29
  1. What browsers support this meta tag?
  2. How do i use it?
  3. 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">
Nightfirecat
  • 11,432
  • 6
  • 35
  • 51
Kyle Yeo
  • 2,270
  • 5
  • 31
  • 53

4 Answers4

24
  1. The name="viewport" property of the <meta> tag is well-supported on major browsers.
  2. You include the attribute like any other on a <meta> element. Put the element straight up in the <head>.
  3. It depends on which content attribute values you provide. This tag instructs the browser to use some default for zoom values on a web page to ensure you don't end up initially displaying only a small portion of the top-right corner of the page on small devices. I'd advise reading some articles on it or, better yet, reading the W3 mobile best practices for mobile web design. Generally, you will only want to set content="width=device-width, initial-scale=1.0 to fit your web page to the device regardless of scale or orientation. I would recommend care if you choose to use the maximum-scale and user-scalable properties as they can cause users to not be able to zoom in on your page. (These properties can, however, be useful when developing full-screen apps or other interactive style apps where you would not want zooming to be applied)

In short, adding this line to a website that should implement viewport scaling should fix most problems.

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

P.S. Quirksmode has a wonderful article describing the issue of viewport size relating to page sizing that's worth reading to understand why this tag might be helpful.

Nightfirecat
  • 11,432
  • 6
  • 35
  • 51
  • 1
    Great article. One small question. When they say "designing flexibly", does that mean all of the sizes (widths and heights) are in percentages (%)? – Kyle Yeo Jun 05 '12 at 06:44
  • I believe it simply refers to the concept of [responsive web design](http://arstechnica.com/business/2012/05/whats-responsive-web-design-all-about/), so it doesn't necessarily mean that the widths and heights will be in percentages, but it will mean that the website is intended to be viewed comfortably on screens of all sizes. It just so happens that in the example the article gives, it might be both media queries and percentage-based widths. – Nightfirecat Jun 05 '12 at 06:46
  • 1
    [This Webhint page](https://webhint.io/docs/user-guide/hints/hint-meta-viewport/) notes that `initial-scale=1` should only be needed if you want to support users on Safari 9 or lower. – Craig Brown Jun 30 '22 at 16:17
6

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.

andreasbovens
  • 1,447
  • 12
  • 11
3

You can view all the details from Mozilla blog

https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag

Kols
  • 3,641
  • 2
  • 34
  • 42
Miqdad Ali
  • 6,129
  • 7
  • 31
  • 50
0

Meta viewport tag is used to adjust the size and visibility of the website according to the size of viewing screen. It helps the webpage to fit automatically in android, tablet or iphone.

Akash Kumar Singh
  • 1