一、视口
1.布局视口（layout viewport）
布局视口是指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度。
2.视觉视口（visual viewport）
视觉视口是指用户正在看到的网站的区域，这个区域的宽度等同于移动设备的浏览器窗口的宽度。
3.理想视口（ideal viewport）
理想视口是值对设备来讲最理想的视口尺寸。理想视口的宽度大小和屏幕的宽度是一致的。
在开发中，为了实现理想视口，需要给移动端页面添加标签配置视口。
4.meta视口标签
理想视口idealviewport
meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致。
meta视口标签：
| 属性 | 说明 |
|---|---|
| width | 设备宽度 |
| initial-scale | 初始缩放比，大于0的数字 |
| maxmum-scale | 最大缩放比，大于0的数字 |
| minimum-scale | 最小缩放比，大于0的数字 |
| user-scalable | 用户是否可以缩放，yes/no（1/0） |
标准的viewport设置
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximun-scale=1.0,minimum-scale=1.0,user-scale=no">
拓展
二倍图
-
在早期的手机屏幕中，css像素：物理像素=1：1。
50px*50px的图片在移动端显示，不存在变形模糊。
-
而现在的手机css像素与物理像素的比值不再为1：1，图片会被拉伸模糊。如50x50的图片在移动端可能会被拉伸成200x200。
解决方式
如有一张200x200像素的图片，我们给该图片设置以下样式：
img{
width:200px;
height:200px;
}
此时在移动端屏幕中，图片被拉伸而造成图片模糊。因此，要想让图片高清显示，我们需要把图片的原始大小改成400x400像素，即二倍图。
通常使用二倍图，但是现在还存在3倍图4倍图的情况，视需求而定。
img{
width:400px;
height:400px;
}
此时在css代码中，img的大小被压缩到200x200。