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]

JS in Depth
XAH  BUY NOW

HTML Basics

HTML Table

Misc

HTML4 Frameset