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

Question

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

Accepted Answer

- The `name="viewport"` property of the `` tag is well-supported on major browsers. - You include the attribute like any other on a `` element. Put the element straight up in the ``. - 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. ``` ``` 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.

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

Solution

Problem