在移动浏览器中使用viewport元标签控制布局
1.背景
移动端浏览器（如Fennec）在一个通常比屏幕更宽的虚拟 "窗口"（视口）中渲染页面，从而无需将所有页面都压缩进小屏幕里（那样会把很多没有针对移动端进行优化的站点打乱）。用户可以通过平移和缩放来浏览页面的不同区域。
Mobile Safari 引入了”viewport元标签“来让web开发者控制视口的尺寸及比例。如今许多其他移动端浏览器已经支持这一标签，虽然它不是任何web标准的一部分。苹果的文档详尽地说明了web开发人员可以怎样使用这一标签，然而我们还是不得不仔细推敲Fennec究竟应该怎样实现它。例如，Safari的文档指出标签的内容应为 "由逗号分隔的列表"，但是现有的浏览器和网页都把逗号、分号及空格混用作分隔符。
2.视口基础
一个典型的针对移动端优化的站点包含类似下面的内容：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
width属性控制视口的宽度。可以像width=600这样设为确切的像素数，或者设为device-width这一特殊值来指代比例为100%时屏幕宽度的CSS像素数值。（相应有height及device-height属性，可能对包含基于视口高度调整大小及位置的元素的页面有用。）
initial-scale属性控制页面最初加载时的缩放等级。maximum-scale、minimum-scale及user-scalable属性控制允许用户以怎样的方式放大或缩小页面。（未完待续）
网友评论