Blog homepage RSS feed Mastodon Bluesky About me
This blog uses a new RSS feed. Please update the old QuirksBlog feed you used to follow.
September 2026 2 August 2026 2 May 2026 6 April 2026 9 2004-2021 blog
Earlier today I happened to catch a toot from web developer Vale asking if initial-scale=1 is still needed in the meta viewport tag. The answer turns out to be No.
This is the end of an era. Since I was partly responsible for its beginning, it’s fitting that I commemmorate its passing.
This is the meta viewport. From now on it needs but one value (argument? setting? no clue what these bits are called):
<meta name="viewport" content="width=device-width">
Update: Seems Manuel Matuzović actually discovered it.
The iPhone introduced the meta viewport. Its purpose was to set the web page’s layout viewport to whichever value was best suited to display web pages on the small mobile screen. (Read this ancient article for background.)
However, an orientationchange did not change the layout viewport, even though there’s more width available for it in landscape mode. I always assumed that the original iPhone took quite some time to recalculate the entire page layout, and that Apple didn’t want to do so each time the user changes orientation. Thus, portrait and landscape used the same value.
All mobile browser vendors copied everything Apple did, but they did switch to another layout viewport if the user moved from portrait to landscape. Now width=device-width worked better in Google, Microsoft, BlackBerry, Nokia, Samsung, and other browsers than on the iPhone.
Then I discovered that initial-scale=1 did the same as width=device-width, except that the iPhone did change layout viewport width after an orientation change.
One mindless copy later all other browsers supported this as well — except for IE10 Mobile, for reasons we’ll probably never know.
So around 2010, 2011, I started seriously pushing the double version of the meta viewport, where both declarations were necessary for perfect compatibility. (I must have written a blog post about this, but I can’t find it for the life of me.)
<meta name="viewport" content="width=device-width,initial-scale=1">
Back in those days, everybody copied whatever I did, so lots of web developers picked up on this, and it made its way into all kinds of frameworks and boilerplate bits of code, up to and including MDN.
Fast forward to today, when Vale discovered the iPhone now correctly switches layout viewports with width=device-width — in both Safari and the WebView. The extra initial-scale=1 is no longer necessary.
(Fifteen years ago I’d have started up about twelve mobile phones with about twenty browsers to thoroughly test if initial-scale can truly be removed from your boiler plate. Now, I’m willing to gamble it.)
This is all you need.
<meta name="viewport" content="width=device-width">
