- You Don't Need Initial-Scale In Your HTML
A line you will find in the head of almost every single HTML document: <meta name="viewport" content="width=device-width, initial-scale=1.0">
The line came into relevance after the first iPhone launched in 2007. As part of the same keynote at Macworld 2007 in which Steve Jobs unveiled the iPhone, he showed off the phone’s web browser loading the New York Times and Amazon. As he proclaimed on stage, the iPhone did not load mobile versions of the site but instead the full desktop versions.
Mobile versions of websites at the time were usually on their own subdomain or path and were extremely simplified experiences. The iPhone ran the full versions. However, these sites weren’t designed for such small screens. Ethan Marcotte wouldn’t coin ‘Responsive Web Design’ until 2010. The intended interaction was for the user to zoom in and pan around the site designed for desktop.
To allow sites designed for small screens to scale nicely, Apple introduced the viewport meta tag as explained in the Safari Web Content Guide. The viewport meta tag was eventually picked up more widely across browsers such that now it is widely supported to make a site responsive.
Though width=device-width handled things broadly, initial-scale=1.0 was important for many years to resolve undesired zooming behaviour in older versions of iOS and some other browsers. However, this isn’t the case any more. All the problems are no longer present and don’t need working around.
I can say with confidence that you do not need to declare initial-scale=1.0 if targeting modern browsers. All you need is <meta name="viewport" content="width=device-width">. That’s 19 bytes you can shave from your document head. Maybe not much in isolation, but when you consider the scale of the web, it adds up.