HTML: Viewport Meta

By Xah Lee. Date: . Last updated: .

Apple introduced a non-standard tag called viewport meta around 2007.

It looks like this:

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

Why? and what does it do?

When Apple introduced the smart phone around 2008, which has a tiny screen, 320 by 480 pixels, while most computer screens at the time is 800 or over 1000 pixels in width.

So, most web pages would not be readable in phone. Most sites even in 2010, still assumed a screen width of at least 1000 pixels, and they use a fixed layout. When displayed on a phone, user needs to scroll horizontally.

The solution Apple did is, to assume a virtual window size, with width of 1000 or so, then, shrink the whole into the actual size of the phone. Not a perfect solution, but at least, most web sites are more readible.

This solves the problem. However, for websites that is actually designed for small screen (sometimes call “responsive design”), this would have a bad effect.

[see CSS: Media Query]

So, Apple invented the viewport meta tag.

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

This tells the device to not use a virtual screen size.

As of today (2018-10-23), this is in a draft standard. https://drafts.csswg.org/css-device-adapt/#viewport-meta

You should add this to your web pages, and use CSS Media Query to design your site.

[see CSS: Media Query]

Note, in general, you should design your site using flow layout. That is, not assuming a fixed window width.

[see Web Design: Fixed-Layout vs Flowed-Layout]

HTML Basics

  1. HTML Basics
  2. HTML5 Tags
  3. Case Sensitivity
  4. Allowed Characters
  5. Charset and Encoding
  6. Self-Closing Tags
  7. Multiple Class Value
  8. HTML Entity List

HTML Table

  1. HTML Table Examples
  2. HTML Table, thead, tbody, tfoot
  3. HTML Table, colgroup, col
  4. Styling HTML Table with CSS
  5. CSS: 3 Columns Page Layout
  6. Pure CSS Table

Misc

  1. Viewport Meta
  2. the Root Element
  3. iframe
  4. video
  5. audio
  6. figure
  7. dl, dt, dd
  8. s strike del
  9. time
  10. meter
  11. progress
  12. q
  13. address
  14. canvas
  15. ruby
  16. HTML5 Custom Data Attribute
  17. Big Tag
  18. Image Maps
  19. Marquee, Scrolling Text
  20. How to Markup Subtitle
  21. Meta Language Tag Obsolete
  22. Browser Auto Refresh

HTML4 Frameset

  1. HTML: Split Windows; Frameset
  2. HTML Nested Frameset
Like it? Help me by telling your friends. Or, Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials