Meta viewport 学习整理

The meta viewport tag contains instructions to the browser in the matter of viewports and zooming. In particular, it allows web developers to set the width of the layout viewport relative to which CSS declarations such as  20%are calculated.

viewport 标签告诉浏览器 viewports 的设置和缩放，并且 web 开发者可以通过这个标签设置和 css 相关的 layout viewport。

标签语法如下：

<meta name="viewport" content="name=value,name=value">

指令

Every name/value pair is a directive. (The word is my own invention.) There are six of them in total:

每一个键值对都是一个指令，一共有6个键值对

• 设置 layout viewport 的宽度
• initial-scale : 设置页面初始化是的缩放比，并且可以设置 layout viewport 的宽度
• minimum-scale ：设置用户可以缩小页面的最小值，
• maximum-scale ：设置用户可以放大页面的最大值
• height ：设置 layout viewport 的高度，但是并不是哪都可以用
• user-scalable : 用户是否可以缩放页面

device-width

width 里有一个特殊的值：device-width，他可以把 layout viewport 的 width 设置为 idea viewport width。

理论上有一个和 device-width 相似的值 device-height，但是它并没有什么用

三种 viewport

之前作者有提到过在移动端浏览器里有2种 viewport，visual viewport 和 layout viewport，下面我假设你知道这2中 viewport。

The ideal viewport

原来还有一种 viewport，我们叫他 ideal viewport，它给出了设备上网页的理想大小，因此，理想视口的尺寸每个器件不同。

在一些老旧并没有retina 屏幕的设备上， ideal viewport 和物理像素的值是一样的，在最新的高物理分辨率的设备上，还继续保留着以前的 idea viewport 的定义，因为它的定义真的很合适。

直到并包括4S，iPhone的理想视口是320x480，无论是否是一个retine屏幕。 这是因为320x480是这些iPhone上的网页的理想尺寸。

关于 idea viewport 有2个重要的东西需要提到

• layout viewport 可以设置为 idea viewport 值。 width = device-width和initial-scale = 1指令这样做。
• 所有的缩放指令都是相对于 idea viewport，而不是 layout viewport 的宽度。 所以maximum-scale = 3表示最大缩放是理想视口的300％。

找到 ideal viewport 的大小

initial-scale

设置 initial-scale 做了2件事

• 它将页面的初始缩放系数设置为相对于 ideal viewport 计算的定义值。 因此它生成 visual viewport 宽度。
• 它将 layout viewport 置为刚刚计算的 visual viewport 宽度。

我们举一个例子：我在竖屏模式下的 iPhone 4s 设置 initial-scale=2，然后其他指令都不设置，不出意外，visual viewport 的宽度是 160px(320px / 2)

但是，它也将 layout viewport 的宽度设置为160px。 所以我们现在有一个160px宽的最小缩放页面。 （visual viewport 不能大于 layout viewport，因此不能缩小）。

已知bug

Android WebKit allows initial-scale to set the layout viewport width only if the value is 1 AND there is no width directive. So only initial-scale=1 without any other directives works.

IE 下 initial-scale 是无效的

Conflicting width directives

一旦 initial-scale 可以设置 layout viewport 宽度，那么你可以创造一些冲突的指令

<meta name="viewport" content="initial-scale=1,width=400">

这种情况下会怎么样？我们继续用 iPhone 4s 来打比方，

• initial-scale=1 告诉浏览器设置 layout viewport 的宽度在竖屏下为 320px，在横屏下为 480px
• width=400 告诉浏览器设置 layout viewport 为 400px，无论在横屏还是竖屏下。

浏览器处理这种情况是取最大值，这种情况下竖屏的 layout viewport 为 400px，横屏下 layout viewport 为480px

已知bug

Android WebKit不遵循这些规则。 如果宽度等于设备宽度或小于320，Android WebKit总是将 ideal viewport 宽度应用于 layout viewport。 在320以上它总是遵守width指令。