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

by
  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.

More Related Contents:

  1. What is initial scale, user-scalable, minimum-scale, maximum-scale attribute in meta tag?
  2. iPad layout scales up when rotating from portrait to landscape
  3. Element not located at bottom of viewport
  4. vs
  5. Force browser to clear cache
  6. Force to open “Save As…” popup open at text link click for PDF in HTML
  7. Provide an image for WhatsApp link sharing
  8. Which are the standard W3C meta tags?
  9. How do you disable viewport zooming on Mobile Safari?
  10. Why does vw include the scrollbar as part of the viewport?
  11. What happens if the meta tags are present in the document body?
  12. What does the shrink-to-fit viewport meta attribute do?
  13. How can I create equal width/height boxes that fit the screen width? [duplicate]
  14. Grid or Table? for Text and an Image on the bottom right (4/4) [duplicate]
  15. How to avoid joining all text from Nodes when scraping
  16. Shape with a slanted side (responsive)
  17. Line Break in HTML Select Option?
  18. Html Video player plays sound but not video
  19. How do you convert screen coordinates to document space in a scaled SVG?
  20. correct semantics for ul in ul
  21. CSS display none and opacity animation with keyframes not working
  22. Images in github pages and relative links
  23. Chrome: Automatic shift of web elements
  24. Link to an element within the current page [closed]
  25. 5 images symmetrically seperated with diagonal lines
  26. Extra space under textarea, differs along browsers
  27. How do I use the z-index properly?
  28. Simulation of a placeholder
  29. Why use data URI scheme?
  30. How to force inline divs to stay on same line?

Leave a Comment