移动端的视口/像素基本知识

Posted 2021-01-01 llcdxh

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动端的视口/像素基本知识相关的知识，希望对你有一定的参考价值。

一、屏幕尺寸

　　指屏幕对角线的长度，单位是英寸，1英寸=2.54cm

技术分享图片

二、屏幕分辨率（物理像素）

　　指在横纵方向上的像素点，单位是px，1px=1个像素点。这里的1像素指的是设备的1个物理像素点。如第一点中的图，iphone6的分辨率为750*1334px，即是横向上有750个物理像素点，纵向上有1334个物理像素点。

三、像素密度（pixels per inch,PPI）

　　屏幕上每英寸可以显示的像素点的数量，单位ppi；屏幕像素密度与屏幕尺寸和屏幕分辨率有关。以上图的iphone6的为例：开方(750*750+ 1334*1334)/ 4.7英寸 = 326 ppi

四、位图像素

　　1个位图像素对应1个物理像素，图片才能得要完美清晰的展现(不失真，不锐化)。要显示宽度为30px*18px（CSS像素）的照片，在DPR为2的情况下，对应的图片需要为60px*36px；DPR为3的情况下，对应的图片需要为90px*54px；基于此种情况，移动端的图片一般需要设计2套，以适应不同的像素比。

技术分享图片

五、设备独立像素

　　设备独立像素是CSS像素和物理像素之间转换的很重要的关键点；在设置了width=device-width时，那么设备独立像素就等于CSS像素；

技术分享图片

五、像素比

　　定义：设备物理像素比上设备独立像素；

　　公式：devicePixelRatio = 设备物理像素（分辨率） / 设备独立像素（近似CSS像素）；

　　以iphone6plus为例：DPR = 1080 / 414 ≈ 3

　　通过JS获取：window.devicePixelRatio

　　通过CSS获取：@media only screen and (-webkit-min-device-pixel-ratio:2){}

六、布局视口（layout viewport）

　　在移动设备上，为了容纳为电脑浏览器设计的网站，默认的布局视口的宽度远大于移动设备屏幕的宽度；布局视口的出现，在极大程度上帮助了桌面网站到移动设备上的转移。以下是常见的移动端浏览器的布局视口值，单位为px（CSS像素），该值是不可变的（布局视口不变，和性能有关系，如果布局视口变化了，那么就会触发重汇重排），可以通过document.documentElement.clientWidth来获取布局视口值。

技术分享图片

当网页的宽度大于以上的值时，就会出现横向滚动条。

技术分享图片

在这种情况下，以上面的iphone5为例，宽度占满的时候，需要640个物理像素，换而言之，需要980px的CSS像素，其对应的像素比为：640/980；而对于iphone6而言，宽度占满的时候，需要750个物理像素，换而言之，需要980px的CSS像素，其对应的像素比为：750/980；这里说明了，在没有设置width=device-width的情况下，针对不同的移动设备，该像素比值是变化不固定的，此种情况是难于做适配的。

另一种情况，设置了width=device-width的情况下，即是布局视口的宽度等于设备独立像素，这种情况下，CSS像素就等于设备独立像素了；

技术分享图片

七、视觉视口（visual viewport）

　　用户看到的网站展示区域，一般视觉视口和设备宽度一致。并且它的CSS像素的数量会随着用户缩放而改变，单位是px（CSS像素）；该值是可变的（缩放情况下）。可以通过window.innerWidth获取。

八、缩放

1.用户放大：一个CSS像素的面积变大，视觉视口内的CSS像素个数变少，视觉视口的尺寸变小（能看到的内容变少了，所以视觉视口变小）；切记，布局视口的大小是不变的，没有设置width=device-width的情况下，布局视口是980px；设置了width=device-width的情况下，布局视口的大小等于设备独立像素。

2.用户缩小：一个CSS像素的面积变小，视觉视口内的CSS像素个数变多，视觉视口的尺寸变多（能看到的内容变多了，所以视觉视口变大）；切记，布局视口的大小是不变的，没有设置width=device-width的情况下，布局视口是980px；设置了width=device-width的情况下，布局视口的大小等于设备独立像素。

3.系统缩放：在meta标签中使用initial-scale=1.0，该initial-scale值改变的是布局视口和视觉视口，而width=device-width改变的是布局视口，所以下面的两个例子的效果是一样的；当布局视口超过视觉视口才会出现滚动条，滚动条和视觉视口有关的。

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <meta charset="utf-8">
 5     <meta name="viewport" content="width=device-width">
 7     <title>系统缩放1</title>
 8     <style media="screen">
 9       *{
10         margin: 0;
11         padding: 0;
12       }
13       #div1{
14         width: 187px;
15         height: 200px;
16         background: blue;
17       }
18     </style>
19   </head>
20   <body>
21     <div id="div1"></div>
22   </body>
23 </html>

技术分享图片

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <meta charset="utf-8">
 5         <meta name="viewport" content="initial-scale=1.0">
 6     <title>系统缩放2</title>
 7     <style media="screen">
 8       *{
 9         margin: 0;
10         padding: 0;
11       }
12       #div1{
13         width: 187px;
14         height: 200px;
15         background: blue;
16       }
17     </style>
18   </head>
19   <body>
20     <div id="div1"></div>
21   </body>
22 </html>

技术分享图片

initial-scale值的变化对布局视口和视觉视口的影响：在iphone6下，该值变大的时候，CSS元素的面积变大，看到的内容变少了，所以布局视口和视觉是变小了；反之，设置initial-scale为0.5时，布局视口和视觉视口都会变大，变为750.

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <meta charset="utf-8">
 5         <meta name="viewport" content="initial-scale=2.0">
 6     <title>系统缩放2</title>
 7     <style media="screen">
 8       *{
 9         margin: 0;
10         padding: 0;
11       }
12       #div1{
13         width: 100px;
14         height: 200px;
15         background: blue;
16       }
17     </style>
18   </head>
19   <body>
20     <div id="div1"></div>
21   </body>
22 </html>

技术分享图片

九、width=device-width和initial-scale之间的冲突

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <meta charset="utf-8">
 5     <meta name="viewport" content="width=device-width,initial-scale=0.5">
 6     <title>冲突</title>
 7     <style media="screen">
 8       *{
 9         margin: 0;
10         padding: 0;
11       }
12       #div1{
13                 width: 375px;
14                 height: 50px;
15         background: blue;
16       }
17     </style>
18   </head>
19   <body>
20     <div id="div1"></div>
21   </body>
22 </html>