1. 设备像素和css像素
- 设备像素，又叫物理像素（physical pixel），给出您正在使用的任何设备的形式分辨率，可通过screen.width/height获取.
- css像素，又叫设备独立像素（device-indenpendent pixel），此为逻辑像素，计算机设备中的一个点
注意：设备像素和css像素的关系（缩小还是放大针对的是css像素）：
- 100％缩放：设备像素和css像素重叠
- 缩小：CSS像素开始缩小，意味着一个设备像素现在与几个CSS像素重叠。
- 放大：CSS像素开始增长，意味着一个CSS像素与几个设备像素重叠。
2. pc端的尺寸
| 屏幕尺寸 | 窗口尺寸 | 滚动偏移 | 视口(布局视口) | html元素 | 事件坐标 | |
|---|---|---|---|---|---|---|
| 概念 | 指显示器的屏幕尺寸，和显示器有关，和浏览器无关 | 浏览器窗口的尺寸，包含滚动条 | 页面的滚动偏移量 | 网站的最上方包含的块，用来约束<html>元素（不包含滚动条） | 发生鼠标事件时，将公开不少于五个属性对，以提供有关事件确切位置的信息 | |
| 获取方式 | screen.width/height | window.innerWidth/height | window.pageX/YOffset | document.documentElement.clientWidth | document.documentElement.offsetWidth | |
| 像素单位 | 设备像素 | css像素 | css像素 | css像素 | css像素 | |
| 其他说明 | 窗口的内部宽度以CSS像素为单位，计算时需要知道将多少css像素包含在浏览器窗口中。因此，如果用户放大，则窗口中的可用空间会减少 | 视口不受CSS影响。它只是在桌面上具有浏览器窗口的宽度和高度。在移动设备上，它要复杂得多。 | 1. pageX/Y给出相对于html的坐标（css像素） 2. clientX/Y给出相对于视口的坐标（css像素） 3. screenX/Y给出相对于屏幕的坐标（设备像素） |
3. 移动设备中的尺寸
| 屏幕尺寸 | 视觉视口 | 布局视口 | 滚动偏移 | html元素 | 事件坐标 | |
|---|---|---|---|---|---|---|
| 概念 | 移动设备的屏幕尺寸 | 在屏幕上显示的页面的一部分。用户可以滚动以更改其看到的页面部分，或缩放以更改可视视口的大小。 | css布局所依赖的视口，比视觉视口要宽，并且不同浏览器的布局视口不同。 | 视觉视口相对于布局视口的位置 | 同web端 | |
| 获取方式 | screen.width/height | document.documentElement.clientWidth | window.innerWidth/Height | window.pageX/YOffset | document.documentElement.offsetWidth/Height | |
| 像素单位 | 设备像素 | css像素 | css像素 | css像素 | css像素 | |
| 其他说明 | 当用户放大或缩小时，视觉视口的尺寸会发生变化，因为屏幕上会容纳更多或更少的CSS像素 | 1. pageX/Y给出相对于html的坐标 2.clientX/Y相对于可视视口 3.screenX/Y是相对于屏幕 |
- 视觉视口
- 布局视口
4. 理想视口
4.1 meta标签
meta标签包含有关浏览器和视口缩放的指令，我们可以通过它来设置布局视口的宽度。
写法如下：
<meta name =“ viewport” content =“名称=值，名称=值”>
其中：
- width：设置布局视口的宽度，值可以为一个正整数或'device-width'
- initial-scale：设置页面的初始缩放比例和布局视口的宽度。
- minimum-scale：设置最小缩放级别
- maximum-scale：设置最大缩放级别
- user-scalable：是否允许用户缩放
4.2 理想视口的概念
在移动端，布局视口往往比视觉视口大很多，给用户不好的体验。所以苹果引入了理想视口的概念。
为浏览器定义的可完美适配移动端的理想viewport,即将布局视口的宽度设置为移动设备的屏幕宽度。
- 所谓完美适配需要满足以下两点：
- 不需要用户缩放和横向滚动条就能正常的查看网站的所有内容。
- 显示的文字的大小在任何分辨率的屏幕下都是合适的
- 设置方式：
- width=device-width（device-width本身就是设备的屏幕宽度）
- 缺点：在iphone和ipad上，无论是竖屏还是横屏，宽度都是竖屏时ideal viewport的宽度。
- initial-scale=1：该值是相对于理想视口来缩放的，值为1表明理想视口的缩放比例是100%，即就是理想视口的本身宽度。
- 缺点：IE 无论是竖屏还是横屏都把宽度设为竖屏时ideal viewport的宽度。
- 同时设置以上两个属性：分别规避了各自的缺点
4.2.1 详解initial-scale
1. 设置此属性实际上发生了两件事儿：
- 它将页面的初始缩放系数设置为相对于理想视口计算得出的定义值。因此，它会生成可视的视口宽度。
- 它将布局视口宽度设置为刚计算出的可视视口宽度。
2. 视觉视口和理想视口的关系如下：
- 可视视口宽度=理想视口宽度/缩放系数
- 缩放系数=理想视口宽度/可视视口宽度
(注意：当缩放系数变大时，那么css像素会变大，导致视觉视口容纳更少的css像素，于是视觉视口变小)
4.2.2指令冲突
当同时设置width=device-width和initial-scale时，就会产生冲突，因为二者同时对布局视口的宽度进行设置。
例如，进行如下设置时：
<meta name =“ viewport” content =“ initial-scale = 1，width = 400”>
- initial-scale=1 告诉它将布局视口宽度设置为纵向320px和横向480px。
- width=400 告诉它在纵向和横向中都将布局视口宽度设置为400px。
结论：浏览器通过遵循纵向或横向的最大宽度来解决该问题。在我们的示例中，纵向布局视口的宽度变为400px（较大的为320和400），而横向布局视口的宽度为480px（较大的为480和400）。
更多信息：github
参考如下：
