viewport（物理像素、逻辑像素|CSS像素、PPK的3个理论、搭配meta标签用法、注意点）、移动端适配

目录

viewport

物理像素

逻辑像素（CSS像素）

PPK的关于三个viewport的理论（可以不用理解）

搭配meta标签用法

width|height

 initial-scale

maximum|minimum-scale

user-scalable

注意

移动端适配

---

viewport

用户网页的可视区域。手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。

物理像素

指的是设备屏幕的物理像素，任何设备的物理像素数量都是固定的。-我们通常说的分辨率(可以通过screen.width|height获得)的单位就是物理像素。

逻辑像素（CSS像素）

设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，可以理解为1mm*1mm的面积绝对单位，说它是相对单位，是因为同样的面积在不同的设备上表示的物理像素不同。

物理像素/逻辑像素=设备像素比(可以通过window.devicePixelRatio获得)取决于屏幕的特性（是否为高密度）。

在 Apple 的视网膜屏（Retina）中，每 4 个像素为一组，渲染出普通屏幕中一个像素显示区域内的图像，从而实现更为精细的显示效果。此时， 250px 的元素跨越了 500 个物理像素的宽度（1个逻辑像素表示2个物理像素）。

PPK的关于三个viewport的理论（可以不用理解）

viewport 深入理解 | 菜鸟教程

搭配meta标签用法

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

如果未加上该标签，网页会在浏览器上转化为物理像素后，然后通过物理像素对应到移动端显示，这样的显示效果就是完全对应缩小到移动端，会导致字体等内容极其小，看不清。

加上后，会通过逻辑像素显示，html中定义的1px大小，在移动端也是1px的逻辑像素，但是由于设备像素比（物理像素/逻辑像素）的变化，可以表示更多的物理像素，相当于对未加上该标签的时候进行了放大 。

下面是每个属性的详细说明：

属性名	取值	描述
width	正整数或device-width	定义视口的宽度，单位为像素
height	正整数或device-height	定义视口的高度，单位为像素，一般不用
initial-scale	[0.0-10.0]	定义初始缩放值
minimum-scale	[0.0-10.0]	定义放大最大比例，它必须小于或等于maximum-scale设置
maximum-scale	[0.0-10.0]	定义缩小最小比例，它必须大于或等于minimum-scale设置
user-scalable	yes / no	定义是否允许用户手动缩放页面，默认值 yes

width|height

定义网页在移动端的宽和高（相当于定义去除8px的margin后的设置width:100%;时body的宽），注意用的是逻辑像素。device-width|height表示设备默认的逻辑像素。HTML中的1px还是对应移动端网页显示的1px，设置width|heigth只能改变是否有滚动条。

设备显示的逻辑像素是不变的，网页的宽高在移动端显示成多少逻辑像素可以设置的（去除margin的100%宽），当网页的宽高的逻辑像素大于设备时，移动端显示就一定会出现滚动条，小于时如果网页本身没滚动条就一定没有，有滚动条就不一定。

例如下图设备默认的逻辑像素宽为375px是不变的。如果设置width=device-width，即显示成移动端的网页（去除8px的margin后的设置width:100%;时body的宽）逻辑像素宽也为375px，此时如果网页在PC端显示无滚动条，则在移动端显示也无滚动条，如果此时定义width大于375则移动端的显示一定会有滚动条。

r

再比如下面图片红色方形相当于设备的，他的宽高逻辑像素是不变的，网页相当于图片整个白色部分，是可以通过width定义的，当小于device-width的宽度时候就不会有滚动条出现（网页本身没有滚动条）。当width设置小于device-width时，在移动端的显示等于device-width的一样。

 initial-scale

定义初始缩放值，initial-scale=2相当于移动设备初始显示的是原来的2倍放大内容（手机上的双击放大），放大了就一定会有滚动条。

maximum|minimum-scale

定义最大能放大或缩小的倍数。

user-scalable

定义用户是否能放大或缩小。

注意

1. viewport 标签只对移动端浏览器有效，对 PC 端浏览器是无效的。
2. 单独设置 initial-scale 或 width 都会有兼容性问题，所以设置布局视口为理想视口的最佳方法是同时设置这两个属性。
3. 即使设置了 user-scalable = no，在 Android Chrome 浏览器中也可以强制启用手动缩放。
4. 当缩放比例为 100% 时，dip 宽度 = CSS 像素宽度 = 理想视口的宽度 = 布局视口的宽度（可以不用理解）。

移动端适配

关于移动端适配，你必须要知道的 - 掘金