移动端-视口和像素

meta标签： 告诉浏览器一些设置信息
是设置理想视口的重要元素，主要用于将布局视口的尺寸和理想视口的尺寸相匹配
meta视口标签存在5个指令
width: 设置布局视口的宽度， 一般都是device-width(设备宽度)
initial-scale: 初始缩放比例。 1即是100%， 2是200% ，以此类推
maximum-scale: 最大缩放比例
minimum-scale: 最小缩放比例
user-scalable：是否允许用户缩放

   <meta name="viewport" content="width=device-width,initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

为什么使用移动端适配：
1） 随着时代的发展，在移动端上访问pc端的页面，逐渐变的常态化
2） 手机的设备尺寸， 碎片化越来越严 碎片化： 种类繁多，五花八门

移动端的测试方式：
1） 谷歌浏览器 提供的 虚拟机
2） 电脑和手机在同一局域网内，扫描编译器提供的二维码，即可在手机上查看
3） 搭建本地服务器，来建立访问

三种视口：
1） 布局视口：布局视口一般都是浏览器厂商给的一个固定值，布局视口是看不见的，浏览器厂商设置的一个固定值，如980px，并将980px的内容缩放到手机屏内。
2） 视觉视口：浏览器可视区域的大小，也就是用户可以通过设备宽度看到的内容
3） 理想视口：布局视口虽然解决了移动端查看pc端网页的问题，但是完全忽略了手机本身的尺寸。
所以苹果引入了理想视口，它对设备来说是最理想的布局视口，

用户不需要对页面进行缩放就能完美的显示整个页面。
最简单的做法就是使布局视口宽度改成屏幕的宽度。

两个像素和一个像素比：
1)css像素(独立像素,逻辑像素) : 在CSS、JS中使用的一个长度单位。单位7px
注：在pc端1物理像素等于1px，但是移动端1物理像素不一定等于1px
2)物理像素：屏幕的物理像素，又被称为设备像素，他是显示设备中一个最微小的物理部件。

任何设备屏幕的物理像素出厂时就确定了，且固定不变的
设备像素比： 简称为dpr， 它是物理像素和独立像素的对应关系(也就是比例)

备注：判断是否为高清时， 看一下dpr的值是否大于1。 一般情况下dpr为整数，

但是一些安卓的机型不为整数
通过：window.devicePixelRatio获得。