学习笔记—前端移动端开发知识点总结_前端还原dpr

1、什么是viewport，怎么理解

在浏览器中渲染页面，当我们设置

html,body{
width:100%;
}
1
2
3

这个时候,body的宽度应该是初始包含快宽度的100%，而初始包含快的宽度为浏览器窗口宽度大小。
按照这个理论来说，在移动端，也是这个道理，width：100%，应该就是移动端设备的宽度；其实不然，在移动端设备和html，body之间还有一层移动端初始包含快：viewport(可以这么理解，正不正确有待考究)，而viewport的宽度默认都是980px.
这样用文字表述未免苍白，可以参考下面这个图：

所以从图中我们可以得到结论，一个没有设置过viewport的页面在移动端承载时，一般都会出现横向滚动条，因为页面的宽度980px超过了设备宽度。

所以我们要通过代码来控制移动端viewport的大小，使它的宽度随着移动端设备的宽度而变化。

<meta  name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
1

理解：
width=device-width：viewport的宽度，可以设置为值，也可以设置为device-width,即设备宽度大小。
initial-scale=1.0：viewport初始缩放值，>1.0放大，<1.0缩小。
maximum-scale=1.0：允许最大缩放值。
minimum-scale=1.0：允许最小缩放值。
user-scalable=0：是否允许用户进行缩放（即手指缩放），1—允许；0—不允许。

2、什么是dpr?

1、设备物理像素（物理像素）：一个物理像素是显示器(手机屏幕)上最小的物理显示单元，在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值。
自己的理解：
物理世界中，不考虑其它因素是一个物理真实像素点，而它的大小，不同的屏幕能做到的程度不一样，随着技术的不断发展，物理像素的大小被越压越小，屏幕也越来越清晰。
2、设备逻辑像素：设备独立像素(也叫密度无关像素)，可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素(比如: css像素)，然后由相关系统转换为物理像素。
自己的理解：每一种型号的屏幕和手机都有固定的尺寸，比如ipone6的屏幕尺寸为：
375✖667；这种像素就叫设备逻辑像素，有规定好的固定大小。

那么一块375✖667的劣质屏幕，和一快375✖667的优质屏幕的区别在哪里呢？
区别在于，不同质量的屏幕的每一个设备逻辑像素点由不同数量的物理像素点组成，如下图所示：
不知道看完这个图大家能不能理解；
知道了物理像素和逻辑像素的区别，也就引申出了dpr这个概念：
3、dpr:设备像素比(简称dpr)定义了物理像素和设备独立像素的对应关系，它的值可以按如下的公式的得到：

设备像素比 = 物理像素 / 设备独立像素 // 在某一方向上，x方向或者y方向

在javascript中，可以通过window.devicePixelRatio获取到当前设备的dpr。
上面图中的dpr应该为4。

3、css中的px像素单位

了解了物理像素和逻辑像素，那么css中的像素单位大小是怎么来确定的呢？
在css中,1px=1逻辑像素，一个css像素和1个逻辑像素的大小是相等的，所以在dpr=2的屏幕中，一个css像素单位的大小=2个物理像素单位

4、为什么优质屏幕更高清？

一块同样大的屏幕，逻辑像素数量相同，但是一块dpr为4的优质屏幕中一个逻辑像素由
四个物理像素组成，也就是说这块优质屏幕的实际物理像素量是普通屏幕的四倍，而屏幕在呈现图片或者视频时，是通过在每一个物理像素上通过颜色，亮度的不同一起组成一张图片或视频帧，所以物理像素更多，它能呈现的画面就越细腻，细节就越丰富。

5、移动端开发怎么让图片和视频显示更为清晰

当ui小姐姐给我们一张图片时，我们鼠标右击查看图片属性：
这里的像素单位也是逻辑像素，属性中xx像素✖xx像素，在前端开发中，呈现在屏幕中也是xx像素✖xx像素,意思就是在浏览器和移动端呈现的也是xx像素✖xx像素的大小，那么怎么做到让同一张图片在普通屏幕和优质屏幕呈现不同的清晰度呢？
ui小姐姐在给前端开发图时，我们会发现有三个版本：

三个大小的图，三个大小的图分别对应三种不同的屏幕，dpr=1,dpr=2,dpr=3,的三种情况，在dpr>1的屏幕中。viewport会这样设置：

//dpr=2
<meta  name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=0.5, user-scalable=0">
1
2

用的是中间那张图片，这样就会使图片更加清晰。
原因在于缩小了两倍，像素大小和第一张图是一样大的，但是它包含的物理像素更多，图片显示也就越清晰。