Viewport 和几个相关问题

什么是 Viewport

Viewport 是当前浏览器的可视内容范围，对于桌面端来说就是当前浏览器的窗口，多数时候并不需要考虑这个参数的影响。而当我们谈 viewport 的时候，都是在讨论移动端的情况。

当使用小屏幕浏览器浏览为大屏幕设计的网页的时候，我们需要放大当前内容区域才能看清楚内容，然后还要左右拖动屏幕移动可视范围来浏览其他区域。这种操作情景，可以想象成用一个放大镜去看报纸，用户必须不断移动放大镜才能看完整个报纸的内容。在这个比喻中，放大镜的可视范围叫做 visual viewport，报纸的内容区域叫做 layout viewport。

从用户体验的角度来讲，必需要左右滑动和手动控制缩放才能看清楚内容，是一种非常不好的体验。所以我们希望改变页面布局，让用户只需要上下滑动就可以浏览到所有内容。Apple 在 iOS Safari 上首先引入了这个概念，后来也被其他浏览器采用了这个设计。即通过设置 layout viewport 的大小，使得 layout viewport 的宽度和 visual viewport 的宽度一致，这样就可以避免左右滑动了。 Viewport 的默认宽度是 980 px，我们可以设置 <meta name="viewport" content="width=device-wdith, initial-scale=1"> 来改变 layout viewport，保证两个 viewport 宽度一致。

Viewport 还包括这些设置项：

width: viewport 宽度，一般设置为 device-width，即当前设备的宽度。这个宽度指的是逻辑像素，而不是物理像素。对于目前主流 iOS 设备，这个值一般是 375。
height: viewport 高度，一般不用。
initial-scale：初始缩放比例。
maximum-scale：最大缩放比例。
minimum-scale：最小缩放比例。
user-scalable: 是否允许用户自行改变缩放比例，选项为 yes / no or 0

Viewport 的属性除了在一开始设定，我们也可以在页面已经渲染之后再次控制。比如下面的例子：

<meta name="viewport" content="width = 380" id="viewport">
<script>
  ... // when it's time to modify viewport
  var vp = docuemnt.getElementById('viewport');
  vp.setAttribute('content', 'width=76px')
</script>

The 300ms delay

对于移动端浏览器来说，当用户点击屏幕的时候，可能是一个 click，也可能是准备进行双击操作 (double tap-to-zoom）。于是浏览器会等待 300 - 350ms 的时候，查看时候有第二次点击，如果有第二次点击屏幕，那么这一次操作就被视为 double tap，而没有第二次操作的话，就是一次 click。但是这样带来的问题是，用户会感觉非常迟滞。超过 100ms 的延迟就可以被人感受到，300 ms的延迟在当下已经是不可以忍受的延迟，在下面的（What Exactly Is..... The 300ms Click Delay）blog 里面的对比视频里面我们可以看到，在有有延迟的情况下连续点击的操作是非常容易感知到这个区别的。

那么如何取消这个延迟呢？方法是禁用双击放大，这样浏览器就不需要等待 300ms 来区别点击和双击放大。具体可以这么设置：