场景：
页面在PC端上的效果没问题，但在手机浏览器会把该网页缩放到很小，即网页在PC端和移动端的视觉效果不一致。为了让用户能够看清设备中的内容，尽量保持分辨率和媒体设备视口大小比例为1：1，需要我们的HTML申明meta viewpoint或者设置@viewport，前者兼容性更好。
写法:
<meta name="viewpoint" content="width=device-width, initial-scale=1.0, maximum-scale=3.0, minimum-scale=0.5，height=, user-scalable=yes>
属性解析：
- width ：设置layout viewport 的宽度，正整数或字符串"width-device"
- initial-scale ：设置页面的初始缩放值，正整数或小数
- maximum-scale ：允许用户的最大缩放值（相对于初始缩放值），正整数或小数
- minimum-scale ：允许用户的最小缩放值（相对于初始缩放值），正整数或小数，一般不允许缩放
- height ：设置layout viewport 的高度，这个属性对我们并不重要，很少使用
- user-scalable ：是否允许用户手动进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许
这些属性可以同时使用，也可以单独使用或混合使用，多个属性同时使用时用逗号隔开就行了。此外，在安卓中还支持 target-densitydpi这个私有属性，它表示目标设备的密度等级，作用是决定css中的1px代表多少物理像素。
- target-densitydpi：值可以为一个数值或 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 这几个字符串中的一个
