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

转载自：https://www.cnblogs.com/llcdxh/p/9532385.html

一、屏幕尺寸

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

image

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

指在横纵方向上的像素点，单位是px。这里的1像素指的是设备的1个物理像素点。如第一点中的图，iphone6的分辨率为750*1334px，即是横向上有750个物理像素点，纵向上有1334个物理像素点。每个像素可以根据操作系统设置自己的颜色和亮度，所谓的一倍屏、二倍屏（Retina）、三倍屏，指的是设备以多少物理像素来显示一个CSS像素，也就是说，多倍屏以更多更精细的物理像素点来显示一个CSS像素点，在普通屏幕下1个CSS像素对应1个物理像素，而在Retina屏幕下，1个CSS像素对应的却是4个物理像素。

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

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

四、位图像素

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

image

五、设备独立像素

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

image

举个例子：
iPhone 3GS 和 iPhone 4/4s 的尺寸都是 3.5 寸，但是iPhone 3GS 的分辨率是 320x480，iPhone 4/4s 的分辨率是 640x960，这就意味着同样长度的屏幕，iPhone 3GS 有 320 个物理像素，iPhone 4/4s 有 640 个物理像素。如果我们按照真实的物理像素进行布局，比如说我们按照 320 物理像素进行布局，到了 640 物理像素的手机上就会有一半的空白，为了避免这种问题，就产生了虚拟像素单位。我们统一 iPhone 3GS 和 iPhone 4/4s 都是 320 个虚拟像素，只是在 iPhone 3GS 上，最终 1 个虚拟像素换算成 1 个物理像素，在 iphone 4s 中，1 个虚拟像素最终换算成 2 个物理像素

五、像素比

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

公式：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来获取布局视口值。

image

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

image

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

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

image

七、视觉视口（visual viewport）

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

一个视觉视口的实际尺寸是确定的（屏幕尺寸）
一个css像素到底占据多少个物理像素和视觉视口有极大的关系
一个视觉视口包含的物理像素的个数是确定的
一个视觉视口包含的css像素的个数是不确定的（和用户的缩放行为有关）

八、理想视口

当要添加理想视口，需要在页面里添加meta视口标签，即设置布局视口的宽度等于设备独立像素；

<meta name="viewport" content="width=device-width"/>

九、缩放

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改变的是布局视口，所以下面的两个例子的效果是一样的；当布局视口超过视觉视口才会出现滚动条，滚动条和视觉视口有关的。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>系统缩放1</title>
    <style media="screen">
      *{
        margin: 0;
        padding: 0;
      }
      #div1{
        width: 187px;
        height: 200px;
        background: blue;
      }
    </style>
  </head>
  <body>
    <div id="div1"></div>
  </body>
</html>

image

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1.0">
    <title>系统缩放2</title>
    <style media="screen">
      *{
        margin: 0;
        padding: 0;
      }
      #div1{
        width: 187px;
        height: 200px;
        background: blue;
      }
    </style>
  </head>
  <body>
    <div id="div1"></div>
  </body>
</html>

image

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=2.0">
    <title>系统缩放2</title>
    <style media="screen">
      *{
        margin: 0;
        padding: 0;
      }
      #div1{
        width: 100px;
        height: 200px;
        background: blue;
      }
    </style>
  </head>
  <body>
    <div id="div1"></div>
  </body>
</html>

image

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=0.5">
    <title>冲突</title>
    <style media="screen">
      *{
        margin: 0;
        padding: 0;
      }
      #div1{
                width: 375px;
                height: 50px;
        background: blue;
      }
    </style>
  </head>
  <body>
    <div id="div1"></div>
  </body>
</html>

image

如果设置了initial-scale的值为2.0，那么布局视口和视觉视口为187.5px，而width=device-width设置的布局视口大小为375px；谁大听谁的，所以最终的布局视口和视觉视口的大小都是375px。

image

十一、完美视口

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

width=device-width：设置布局视口的大小等于设备独立像素；
initial-scale=1.0：设置布局视口和视觉视口的大小等于设备独立像素；
user-scalable=no：不允许用户进行缩放；
minimum-scale和maximum-scale分别这只最小的缩放为1.0，最大的缩放为1.0，表示不允许用户进行缩放操作。