HTML5 定义文档视口
■知识点
在移动Web开发中，经常会遇到viewport (视口），即浏览器显示页面内容的屏幕区域。一般移动设备的浏览器默认都设置一个<meta name="viewport">标签，定义一个虚拟的布局视口，用于解决早期页面在手机上显示的问题。
iOS、Android基本都将这个视口分辨率设置为980px，所以桌面网页基本能够在手机上呈现，只不过看上去很小，用户可以通过手动缩放网页进行阅读。这种方式用户体验很差，建议使用<meta name="viewport">标签设置视口大小。
<meta name="viewport">标签的设置代码如下：
<meta id=nviewportn name="viewport" content="width=device-width; initial-scale=1.0;
maximum-scale=l; user-scalable=no;">
各属性说明如表所示。
属 性 | 取 值 | 说 明 |
width | 正整数或device-width | 定义视口的宽度，单位为像素 |
height | 正整数或 device-height | 定义视口的高度，单位为像素，一般不用 |
initial-scale | f0.0-10.01 | 定义初始缩放值 |
minimum-scale | [0.0-10.01 | 定义缩小最小比例，它必须小于或等于maximum-scale设置 |
maximum-scale | [0.0-10.01 | 定义放大最大比例，它必须大于或等于minimum-scale设罝 |
user-scalable | yes/no | 定义是否允许用户手动缩放页面，默认值为yes |
■实例设计
下面示例在页面中输入一个标题和两段文本，如果没有设置文档视口，则在移动设备中所呈现效果 如图1.6所示；而设置了文档视口之后，所呈现效果如图所示。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>设置文档视口</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<h1>width=device-width,initial-scale=1</h1>
<p>width=device-width将layout viewport（布局视口）的宽度设置 ideal viewport（理想视口）的宽度。</p>
<p>initial-scale=1表示将 layout viewport （布局视口）的宽度设置为 ideal viewport（理想视口）的宽度，</p>
</body>
</html>
湘公网安备:43011102000856号 
点击加载更多评论>>