<meta name="viewport" content="width=device-width"/>
上面的代码将浏览器的视窗设置为了设备的宽度, 在这样的设置下也不方便我们布局, 因为设备尺寸这么多, 假如我们把 width=device-width 设置为一个固定的值呢?
目前市面是以两个尺寸为标准, 一个是 iphone 4/5 的宽度 640px 一个是 iphone6 的 750px
需要注意的是 iphone 是双倍屏 iphone 4/5 为 320px iphone6 为 375px。如下 :
<meta name="viewport" content="width=640"/>

examples

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=640"/>
	<title>viewport</title>
</head>
<body>
	<h1>viewport</h1>
</body>
</html>
我们还可以设置默认显示比例
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=640,initial-scale=1.0"/>
	<title>viewport</title>
</head>
<body>
	<h1>viewport</h1>
</body>
</html>
在设置 viewport 的宽度为一个固定的大小时, 这个时候整个 body 的最大宽度为这个大小
在里面的元素都可以按 px 的单位来控制。