上QQ阅读APP看书，第一时间看更新
2.1.3 定义文档视口
在移动Web开发中，经常会遇到viewport（视口）问题，也就是浏览器显示页面内容的屏幕区域。一般移动设备的浏览器都默认设置一个<meta name="viewport">标签，定义一个虚拟的布局视口，用于解决早期的页面在手机上显示的问题。
iOS、Android基本都将视口分辨率设置为980 px，所以桌面网页基本能够在手机上呈现，只不过看上去很小，用户可以通过手动方式缩放网页进行阅读。这种方式令用户体验很差，建议使用<meta name="viewport">标签设置视图大小。
<meta name="viewport">标签的设置代码如下。
<meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no;">
<meta name="viewport">标签的属性说明如表2.2所示。
表2.2 <meta name="viewport">标签的属性说明
【示例】在页面中输入一个标题和两段文本，如果没有设置文档视口，则在移动设备中所呈现的效果如图2.2所示，而设置文档视口之后，所呈现的效果如图2.3所示。
<!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>
提示：ideal viewport（理想视口）通常就是指设备的屏幕分辨率。
图2.2 默认被缩小的页面视图
图2.3 保持正常的布局视图