译——meta viewport

---

 

此文翻译PPK大神的——meta viewport。

主要讲到了第三种viewport——ideal viewport,以及使用meta viewport 设置移动浏览器的视口。

 the meta viewport tag

<meta name="viewport" ....>包含了浏览器对于viewport和缩放的各类指令。尤为是，它容许web开发者设置layout viewport的宽度，从而直接影响CSS的声明的计算结果，好比width:20%。

具体语法以下：

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

指令

每一个键值对都是指令。（这个词是我本身发明的）总共有六个：

• width：设置layout viewport的宽度
• initial-scale：设置页面与layout viewport之间的初始放大系数
• minimum-scale：设置最小放大系数（用户能够虽小的最小程度）
• maxmum-sacle：最大放大系数（用户能够放大的最大程度，好比300%）
• height：设置layout viewport的高度。应该设置布局视图的高度。它在任何地方都不受支持。（通常不会规定高度）
• user-scalable：设置为no，意味着阻止用户进行缩放操做。最好不要使用。

device-width value

width指令有一个特殊的值：device-width。设置layout viewport为ideal viewport。

理论上有一个device-height……（不用）

三种viewport

好久之前，我曾报道过移动浏览器有两个视图:可视视图和布局视图（visual viewport and layout viewport）。这里我假设读者已经了解他们，因此若是有须要，能够去读一下原文。（个人译文）

the ideal viewport（理想视口）

原来还有第三种视口，我决定称呼它为ideal viewport。它给出了设备上web页面的理想大小。所以，该值因设备不一样。

在老旧或廉价的低分辨的设备上，ideal viewport与物理像素相同，可是这并非必须的。具备更高物理像素密度的新设备极可能保留旧的ideal viewport，由于它很是适合该设备。

包括4S在内，iPhone的理想视口是320x480，不管它是否有视网膜屏幕（高分辨？）。这是由于320x480是这些iphone手机网页的理想尺寸。

关于ideal viewport重要的两点是：

1. layout viewport 能够设置为visual viewport的大小。width=device-width和initial-scale=1就能够达到这样的效果
2. 全部的缩放指令（scale directives）都是相对于ideal viewport的，而不是layout viewport的宽度。maximum-scale=3表示能够放大至ideal viewport三倍。

找到理想的视口尺寸（ideal viewport dimensions）

若是可以读出ideal viewport的尺寸，是很是有用的。事实并不是如此。

well,you can do it。能够给页面设置元标签读出document.documentElement.clientWidth/Height：

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

若是不被支持那么就没有其余办法可以读出ideal viewport的尺寸。我本但愿screen.width/height能够有所帮助，可是目前只有Blackburry能够给出正确的信息，其余浏览器给出各类无用信息。

开放式问题：screen.width/height应该给出ideal viewport 的尺寸吗？

Pro：该属性对仍是包含有用信息的

Con：ideal viewport的尺寸没有必要与设备的物理像素相同。

兼容性——ideal viewport

layout viewport的宽度

在渲染页面以前，浏览器须要知道layout viewport的宽高数值。这个数值会影响到CSS好比width:20%这样的声明的计算结果。

没有任何进一步的指示，浏览器本身选择宽度。在测试的8款浏览器中，有6款是980px，黑莓和IE10是1024px。这里没有对错之分;这只是浏览器厂商的选择。

当你在meta viewport中设置width=400或则其余数值，至关于设置了layout viewport的值。这咱们已经知道。

然而，Android Webkit和IE浏览器的最小viewport是320px。当你低于320px时，他们会恢复到ideal viewport的宽度。

而后是layout viewport与ideal viewport相等的例子。这发生在当你设置width=device-width,initial-dcale=1的时候。这有点复杂，由于Sarari和IE10有bugs，使用initial-scale也有问题，可是这是广泛规律。

Minimum and maximum dimensions

layout viewport的最大宽度是10000像素。我并不彻底相信这个数值，由于浏览器不会容许你放大页面到这个程度。可是，我依然接受这个数值。

layout viewport的最小宽度是ideal viewport的十分之一，也就是最大的缩放系数（IE的layout viewport不会变得比visual viewport更小）。例外：Android Webkit和IE浏览器从不会低于320px。

兼容性——layout viewport

Zoom（缩放）

缩放有点棘手。理论听起来很简单：能够决定用户放大或者缩小的缩放系数。有两方面的问题：

1. 咱们没法直接读取缩放系数。可是咱们读取visual viewport的宽度，它与缩放系数蹭成反比例。缩放系数越大，visual viewport就越小。因此最小的缩放系数决定了visual viewport的最大值，反过来也同样。
2. 事实证实，全部缩放因子都与ideal viewport相关，不管layout viewport的当前大小如何。

还有就是名字的问题。在Apple-speak（苹果语言？），缩放称为scale，对应的meta viewport指令为initial-scale，minimum-scale，maximum-scale。其余浏览器为了兼容IPhone的网站，也被迫遵循。

这三个指令都须要缩放系数，好比“缩放至ideal viewport的200%”。

Formulas（公式）

先来定义一个公式：

visual viewport width = ideal viewport width / zoom factor
zoom factor = ideal viewport width / visual viewport width

因此，若是ideal viewport 是320px，缩放系数是2，那么visual viewport就是160px。layout viewport在计算中不起做用。

最大和最小缩放因子

浏览器支持的最大和最小缩放系数是多少呢？

首先，有一个限制，visual viewport不能比layout viewport更宽，因此在大多实际状况中最小的缩放系数是 ideal viewport / layout viewport 。

不过，在这些测试中，我可使用荒谬的layout viewport宽度，好比5000。我这样作了，结果是:

• Android Webkit浏览器最小的缩放系数是0.25，最大是4。这不能改变。然而，它使用640 / 0.25 = 2560px，这适应横屏模式，也适应竖屏模式。
• IE最大的visual viewport是1024px，竖屏最大的缩放系数是6，横屏是6又2/3。这也不能改变。
• 在其余浏览器中，若是没有任何缩放指令，最小缩放系数约为0.25，最大为5。
• 若是经过添加一个较大layout viewport宽度或者一个较大的最大缩放系数，最小缩放系数会变成0.1，最大为10。

这些因素略有不一样;见下表。

理论上，IPhone的visual viewport范围是32px （最大缩放系数为10）到3200px（最小缩放系数为0.1）。

initial-scale

设置initial-scale指令能够作两件事：

1. 设置初始页面缩放系数，相对于ideal viewport进行计算。所以生成了visual viewport。
2. 将layout viewport设置为上一步计算的visual viewport。

假设咱们有一个处于竖屏模式的iPhone手机，并设置了initial-scale=2，并无下一步指示。因而visual viewport被设置成了160px。

然而，它也设置了layout viewport的宽度为160px。因而咱们就有了一个最小缩放的宽度160px的web页面。（visual  viewport不能比layout viewport更大，因此缩小操做没有用）

NO，这彻底没有意义。我会说这是疯了之类的话。可是，浏览器就是这样工做的。

浏览器bugs

除了Android Webkit's。显然，Android webkit's容许改变layout viewport ，当initial-scale等于1而且没有width指令的时候。因此initial-scale=1（没有其余指令）起做用了。

对于IE，它采用了错误的ideal viewport（320X320 代替 320X480），还伪装值为1（initial-scale）。因此你设置其余值对于IE不起做用。

冲突的width指令

因为initial-scale设置了layoutViewport，如今你能够设置冲突指令：

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

那么会发生什么呢？浏览器获得了冲突的指令。让咱们在回顾一下Iphone4s：

1. initial-scale=1，会设置layout viewport竖屏模式下为320px，横屏模式下是480px。
2. width=400设置layout viewport宽度为400px，不管是横屏仍是竖屏。

浏览器会使用较大的宽度，不管横屏或者竖屏，来解决这个问题。咱们例子，结果会是竖屏模式下layout viewport宽度为400（320和400中较大的一个），横屏模式下layout viewport是480（480 和400中较大的那个）。

有道理吗？其实并无，可是浏览器依然这么工做。

不管哪一种状况，咱们都有一个layout viewport的最小宽度。上面的meta viewport设置layout viewport为400px，可是浏览器容许在设备尺寸或者方向须要的状况下，增加layout viewport。

我不肯定设置最小宽度是否有实际效果，可是若是你须要，它就在这里。

浏览器bugs

Android webkits不遵循如下规则：若是width等于device-width或者小于320px，它始终会让layout viewport等于ideal viewport的大小。大于320，始终采用width指令的值。

IE在大于width=480时，不遵循规则，它会设置layout viewport宽度为1024px。

兼容——initial scale 和width

能够去看原文图示，有些交互没办法转过来

minor iPhone bugs

我发现一个iPhone的小bug，iPad没有。

1. 若是同时声明width和initial-scale，浏览器会在横屏方面是自动放大页面（ie的visual viewport会layout viewport小得多）。
2. 用户在横屏模式下缩小而后切换到竖屏模式。
3. 横屏下的minimum-scale与竖屏的minimum-scale乘以(portrait-ratio/landscape-ratio)。（因此若是横屏模式viewport宽度为400px，竖屏minimum-scale为268）
4. 解决：在竖屏尽量放大，错误就会消失。

能够在这里试试。横向拿着iPhone手机，跳转到该页面，按照上面的步骤作。

minimum- and maximum-scale

关于minimum-scale和maximum-scale，我作了比较少的测试。基本上工做正常，除了在Abdroid webkit上，它不支持minimum-scale；还有IE，运行的一团糟——很是糟糕，我已经放弃去理解到底发生了什么。

下面的例子中，layout viewport应该按照上面描述的进行的计算，而后缩放系数从50%到200%，也就是说，visual viewport能够ideal viewport的两倍大到两倍小。

一个例外：visual viewport不会变的比layout viewport更小。

 

参考

1. meta viewport
2. 有关各类手机的屏幕尺寸——http://screensiz.es/phone
3. W3C——css device adaptation module
4. viewport——overview