viewport meta 说明及浅见

常见使用

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>

宽度为设备宽度，初始缩放比例为 1 倍，禁止用户缩放

<meta id="viewport" name="viewport" content="initial-scale=1.0; maximum-scale=1.0; user-scalable=no;" />

属性说明

width：可设定数值，或者指定为device-width（设备宽度）

height：可设定数值，或者指定为device-height（设备高度）

initial-scale：第一次进入页面的初始比例

minimum-scale：允许缩小最小比例

maximum-scale：允许放大最大比例

user-scalable：允许使用者缩放，1 or 0 (yes or no)

最初执行viewport meta加入如下

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

编译过程会转化成如下的语意，

@viewport {
    width: device-width;
    initial-scale: 1.0
}

基本说明

width=device-width
先提一下几个注意的地方，首先在viewport里面的width通常会看到设定为device-width ，主要是为了让整个页面宽度与手机可视宽度相同，如此就可以简单相容于不同机型萤幕大小，如果这边width没有设定的话，就会依照html css给予的width当作预设值。
因为解析度不同，device-width有时候不一定是view width ，所以在类似iphone 4高解析度机器上，device-width=320 ，可是实际解析度为480，这时候就需要利用javascript针对UA下去做动态调整。 user-scalable  从属性名称来看就是允许开启、关闭的设定，使用者能否放大、缩小页面，如果页面不允许手机使用者缩放，就直接设定为0，或者no，反之要启动缩放功能，给予1或者是yes。  接下来将说明几种常用的方式，以及测试验证提供给大家参考。  基本宽度（并不是指html body width），

<meta name="viewport" content="width=300px">

基本高度

<meta name="viewport" content="height=300px">

禁止使用者放大缩小

<meta name="viewport" content="user-scalable=0">
<meta name="viewport" content="user-scalable=no">

基本款式，

<meta name="viewport" content="width=device-width">

初始检视n 放大，(这里使用x 10.0)

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

限制最大放大比例

<meta name="viewport" content="width=device-width, maximum-scale=15.0">

限制最小缩小比例（数值必须为正值）

<meta name="viewport" content="width=device-width, minimum-scale=0.1">

进阶应用

上面已经说明了几种常用的基本应用，接着要说明一个概念，假设设定数值

放大议题

initial-scale=10.0
maximum-scale=15.0

可以很简单得知，一开始就是x 10.0，最大可放大到x 15.0，如果变化一下

initial-scale=15.0
maximum-scale=10.0

可以发现，初始的放大比例会变成x 15.0，最大放大比例 还是x 15.0，推论出来结果就是

*初始、最大值，以最大值为主*。

缩小议题

接着讨论缩小，一开始设定数值，

initial-scale=5.0
minimum-scale=1.0

结果跟我们预估相同，初始值x 5.0，最小缩小值x 1.0，如果将数值反过来之后会发现，

initial-scale=1.0
minimum-scale=5.0

结果居然是，初始值x 1.0，最小缩小值x 1.0 ，最后推论结果为

初始、最小值，以最小为主。

看到这边相信大家对于数值设定有个认知，接着做个最后小测试，

initial-scale=1.0
minimum-scale=5.0
maximum-scale=0.1

猜猜看，结果为何？？？
答案，init x 1.0， max x 1.0， min x 1.0，无法放大缩小。

viewport meta 其他参考

另外提供给大家几个viewport的使用方式，
如果在手机端我们希望网页呈现固定， 不希望使用者随意缩放 ，直接设定如下

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

如果希望在不同device 使用不同缩放大小，就必须使用javascript，侦测UA(User agent)，动态设定viewport，片段程式如下，

viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;');

后记

在css media query中， viewport meta是一个初始化很重要的开始，经过这次开发的过程中慢慢分析，调整才了解到里面一些架构状况，另外css @viewport属性还有很多种类，详细列表可以参考 W3C viewport property index table。
因为目前移动装置萤幕尺寸不同，种类需求也都不同，最理想的状况当然是一种web全部满足，不过依照目前的规格分歧来看，还有一段很长的路要走。

参考资料

• http://hsinyu00.wordpress.com/2011/04/05/mobile-web-viewport/
• http://fairyfish.net/m/viewport-meta-tag/
• http://dev.w3.org/csswg/css-device-adapt
• http://stackoverflow.com/questions/3588628/can-i-change-the-viewport-meta-tag-in-mobile-safari-on-the-fly