视口Viewport
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
- 设备像素比：
window.devicePixelRatio
电脑 1
低端手机 2
高端手机 3
设备像素比越高，设备显示的越清晰
- 视口的作用
就是让移动设备显示的窗口宽度等于设备的真实宽度width=device-width，可以正常浏览网页。
- 如何使用视口
<meta name="viewport" content="视口的属性" />
视口的属性有哪些？
height： 视口的高度
width： 视口的宽度
device-height： 设备屏幕的输出高度
device-width：设备屏幕的输出宽度
initial-scale：初始比例，页面加载时的默认比例1.0
user-scalable：指定用户是否可以对页面进行缩放 yes允许/no不允许
minimum-scale：最小允许缩放的比率1.0
maximum-scale：最大允许缩放的比率1.0
完整视口的写法：
<meta name=viewport content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
拓展：
meta 标签新增 minimal-ui 属性，让网页在加载时便可隐藏顶部的地址栏与底部的导航栏【IOS】
