You Don't Need Initial-Scale In Your HTML
You Don’t Need Initial-Scale In Your HTML
你不再需要在 HTML 中使用 initial-scale
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">
在几乎每一个 HTML 文档的 <head> 部分，你都能找到这样一行代码：<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 sites but instead the full desktop versions. 这行代码是在 2007 年第一代 iPhone 发布后才变得重要的。在 2007 年 Macworld 大会的发布会上，史蒂夫·乔布斯在展示 iPhone 时，演示了其内置浏览器加载《纽约时报》和亚马逊网站的过程。正如他在台上所宣称的那样，iPhone 加载的并非这些网站的移动版，而是完整的桌面版。
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 sites designed for desktop. 当时的网站移动版通常拥有独立的子域名或路径，且体验极其简化。而 iPhone 运行的是完整版本，但这些网站并非为如此小的屏幕而设计。直到 2010 年，Ethan Marcotte 才提出了“响应式网页设计”（Responsive Web Design）的概念。当时预期的交互方式是让用户在为桌面端设计的网站上进行缩放和平移。
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 universally across browsers such that it became the widely supported way to make a site responsive. 为了让为小屏幕设计的网站能够良好地缩放，苹果在《Safari Web 内容指南》中引入了 viewport meta 标签。该标签最终被各大浏览器普遍采用，成为了实现网站响应式布局的广泛支持方式。
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.
虽然 width=device-width 已经能处理大部分情况，但多年来 initial-scale=1.0 对于解决旧版 iOS 及其他浏览器中不必要的缩放行为至关重要。然而，现在情况已经变了。所有这些问题都不再存在，也不再需要变通处理。
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.
我可以自信地说，如果你的目标是现代浏览器，你完全不需要声明 initial-scale=1.0。你只需要 <meta name="viewport" content="width=device-width"> 就够了。这能让你的文档头部减少 19 个字节。单独来看可能微不足道，但考虑到整个互联网的规模，这积少成多。
#front-end #development #HTML #前端 #开发 #HTML