像素

设备像素（device pixels，DP）：也被称为物理像素，设备屏幕上的一个个点，屏幕分辨率即设备像素。例如，iPhone8的设备像素为1334x750。
设备独立像素（device-independent pixels，DIP）：也被称为逻辑像素，计算机坐标系统中的一个点。例如，iPhone8的设备独立像素为667x375。
css像素：也被称为虚拟像素，viewport中的一个点，浏览器的抽象单位。
设备像素比（device pixel ratio，DRP）：设备像素/设备独立像素。即一个逻辑像素对应多少个物理像素。DPR越高渲染越细致。例如，iPhone8的DPR为2，即使用4个物理像素显示一个逻辑像素。

在桌面浏览器中，电脑屏幕的设备像素等于css像素，DPR为1，即 CSS 中的1px等于设备屏幕的1px。但在移动端，CSS 中的1px并不一定等于设备的1px，随着技术的进步，移动设备的屏幕分辨率越来越高，在屏幕尺寸不变的情况下，像素却多了一倍两倍甚至三倍，DPR也越来越高，也就是一个css像素会由更多的设备像素来显示。例如，iPhone3的分辨率为320x480，DPR为1，CSS 中的1px就等于设备屏幕的1px。而从iPhone6到了iPhone8，Retina显示屏的分辨率达到为1334x750，DPR为2，也就是 CSS 中的1px等于设备屏幕的4px，也就是使用4个物理像素显示一个逻辑像素。

什么是viewport

viewport中文翻译为“视区”。ppk大佬将其细分为三个概念：layout viewport、visual viewport与idea viewport。

layout viewport：网页布局的整个区域，即布局视区。
visual viewport：显示在屏幕上的区域，即可视视区。
idea viewport：移动设备理想视区尺寸。

layout viewport即 html 元素的容器，一般情况下layout viewport的宽高即 html 元素的宽高，可以通过document.documentElement.clientWidth/Height 来获取，当浏览器加载页面时会加载整个layout viewport。如果浏览器的窗口没办法显示整个layout viewport，就会出现滚动条，用户移动缩放查看的页面部分就是visual viewport，visual viewport的尺寸等同于浏览器窗口尺寸，可以通过 window.innerWidth/Height 来获取。这里说到的viewport宽高的单位均为css像素。
而idea viewpoint则是一个完美适配移动设备的viewport，即不需要缩放及横向滚动条就能正常查看网页所有内容，包括文字与图片。为了达到这个效果需要通过viewport来控制 html 使其宽度等于设备独立像素宽度。所以不同设备的idea viewport均不相同。例如，iPhone6到iPhone8的idea viewport为375px。Plus的idea viewport为414px。

用meta来控制viewport

在 head 中使用元数据 meta 来控制viewport实现自适应。

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

meta viewport 有5个常用属性：

width：设置layout viewport的宽度，width=device-width表示使layout viewport宽度等于设备宽度。
initial-scale：初始缩放比例。
minimum-scale：允许用户的最小缩放值。
maximum-scale：允许用户的最大缩放值。
user-scalable：是否允许用户进行缩放，no 代表不允许，yes代表允许（iOS10为提高Safari网页的易用性，即使设置了user-scalable=no，用户也可以手动缩放）。
以及height属性，与width对应，不常用。

在移动端，meta中如果不设定width属性或者不添加meta标签，layout viewport的宽度将默认由设备决定（一般为980px），如果设置width=device-width，layout viewport宽度等于visual viewport，同时layout viewport即成为ideal viewport。
为页面B添加meta来使页面自适应屏幕。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>页面A</title>
</head>
<body>
    <div><img style="width:100px" src="plato.jpg"></div>
    <div style="font-size:16px">...</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>页面B</title>
</head>
<body>
    <div><img style="width:100px" src="plato.jpg"></div>
    <div style="font-size:16px">...</div>
</body>
</html>