CODEWITHSUNDEEP
htmlmeta-tagsviewport
Kyle Yeo
Kyle Yeo

Reputation: 2368

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

  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">

Upvotes: 31

Views: 24038

Answers (4)

Nightfirecat
Nightfirecat

Reputation: 11610

  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.

Upvotes: 24

Miqdad Ali
Miqdad Ali

Reputation: 6147

You can view all the details from Mozilla blog

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

Upvotes: 3

Akash Kumar Singh
Akash Kumar Singh

Reputation: 1

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.

Upvotes: 0

andreasbovens
andreasbovens

Reputation: 1437

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.

Upvotes: 6

Related Questions