HTML: Viewport Meta

By Xah Lee. Date: . Last updated: .

Summary: if you are writing a web page today, you should add this meta tag in the head section of html:

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

Following is the explanation.


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]

Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

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

Web Dev Tutorials

  1. HTML
  2. Visual CSS
  3. JS in Depth
  4. JS Reference
  5. DOM
  6. SVG
  7. Web Dev Blog