meta标签中viewport属性的含义

利用meta标签对viewport进行控制

  　 移动设备默认的viewport是layout viewport，但在进行移动设备网站的开发时，我们需要的是ideal viewport。这就使用meta标签来设置移动端显示的比例。
　　我们在开发移动设备的网站时，最常见的的一个动作就是把下面这个东西复制到我们的head标签中：

　　该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。如果在进行移动端开发时不这样的设定的话，那就会使用那个比屏幕宽的默认viewport，网站在手机端显示时会出现横向滚动条。
       meta viewport 标签首先是由苹果公司在其safari浏览器中引入的，目的就是解决移动设备的viewport问题。后来安卓以及各大浏览器厂商也都纷纷效仿，引入对meta viewport的支持，事实也证明这个东西还是非常有用的。

meta viewport 的属性

在苹果的规范中，meta viewport 有6个属性(暂且把content中的那些东西称为一个个属性和值)，如下：

这些属性可以同时使用，也可以单独使用或混合使用，多个属性同时使用时用逗号隔开就行了。

把当前的viewport宽度设置为 ideal viewport 的宽度

　　要得到ideal viewport就必须把默认的layout viewport的宽度设为移动设备的屏幕宽度。因为meta viewport中的width能控制layout viewport的宽度，所以我们只需要把width设为device-width这个特殊的值就行了。

　　要把当前的viewport宽度设为ideal viewport的宽度，既可以设置 width=device-width，也可以设置 initial-scale=1，但这两者各有一个小缺陷，就是iphone、ipad以及IE 会横竖屏不分，通通以竖屏的ideal viewport宽度为准。所以，最完美的写法应该是，两者都写上去，这样就 initial-scale=1 解决了 iphone、ipad的毛病，width=device-width则解决了IE的毛病：

• 上一篇：游戏化设计技巧，怎样提升用户的参与度
• 下一篇：做好网页排版10个错误不能犯！