一、视口
缩小屏幕宽度 刷新页面 打开手机 sina.cn
查看源代码 找到如<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" id="viewport" />
width=device-width 视口为设备宽度（就是人设置的一个宽度）
initial-scale=1.0 初始化的视口大小是1.0倍
maximum-scale=1.0 最大的倍数是1.0倍
user-scalable=0 不允许缩放视口
将 <meta name="viewport" content="width=device-width" />
改为
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
运行 在服务器上
打开 http://cli.im/ 草料二维码
将 http://localhost/04_约束视口.html 网址添加进去生成二维码下载即可
查看自己手机宽度值是多少
1、给我们的页面加上一条meta语句：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
继续用document.documentElement.clientWidth来测试宽度。你会发现，宽度不一样了。
不同设备的测试结果：
iphone6plus 414
锤子T2 360
小米Note 393
摩托罗拉 411
这个meta标签，就是“视口约束”。约束之后的视口宽度，和设备宽度相同，实际上就是人为设置的数字。每个设备出厂前都会设置一下约束视口之后的宽度。
约束之后的视口宽度，不是自己的分辨率！！每个手机的分辨率，都要比自己的视口宽度大得多得多！
可以通过chrome 模拟iPhone 添加/删除 meta name="viewport" 测试宽度值
如使用iphone6 plus 测试
不添加 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
是 980 字非常的小 相当于高空俯瞰页面
添加 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
是 414 字很大
将<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
改为
<meta name="viewport" content="width=320” />
在将 <h1 id="biaoti"></h1>
改为 <h1 id="biaoti">我是一个主标题</h1>
在将 biaoti.innerHTML = document.documentElement.clientWidth; 注释掉
运行
改为 <meta name="viewport" content="width=420" />
运行
改为 <meta name="viewport" content="width=520" />
运行
改为 <meta name="viewport" content="width=980" />
运行
结论: 视口越小，字越大。 视口越大，字越小。