这遍文章主要介绍对于不同大小屏幕，网页的内容无法自适应处理问题。

基本概念

视窗

viewport 浏览器的窗口，它代表的是浏览器中网站可见内容的部分。

1
2
3
4
5
6
7
(function (window, document) {
    // 获取浏览器的窗口 宽度、高度
    var clientW = document.documentElement.clientWidth;
    var clientH = document.documentElement.clientHieght;
    var innerW = window.innerWidth;
    var innerH = window.innerHeight;
}())

物理像素

Physical Pixel 又称为设备像素，设备屏幕实际拥有的像素点。每个像素可以根据操作系统设置自己的颜色和亮度，可能一个物理像素代表多个css像素。

1
2
3
4
5
(function (window, document) {
    // 获取屏幕大小
    var screenW = window.screen.width;
    var screenH = window.screen.height;
}())

设备独立像素（DIP）

Density Independent Pixels 也称为设备无关像素，基于计算机控制的坐标系统和抽象像素（虚拟像素），由底层系统的程序使用，转换为物理像素的应用。

CSS像素

CSS Pixel 与设备无关的抽象像素，用来精确度量网页上的内容。

屏幕密度（PPI）

Pixels Per Inch 表示每英寸所拥有的像素数量。

设备像素比（DPR）

Device Pixel Ratio 定义了物理像素和设备独立像素的对应关系。该比例是与每个CSS像素相对应的物理设备像素的数量。

【官方介绍】
$$
设备像素比 = \frac{物理像素}{设备独立像素}
$$

1
2
3
4
(function (window, document) {
    // 获取DPR的值
    var dpr = window.devicePixelRatio;
}())

网页适配

实现页面适配功能可以根据dpr的值来修改html的font-size，从而使用rem实现等比例缩放。

1
2
3
4
5
(function(window, document){
    var docEl = document.documentElement
    var dpr = window.devicePixelRatio || 1
    docEl.style.fontSize = (12 * dpr) + 'px'
}())
1
2
3
<body>
    <div style="font-size: 1rem">(12*dpr)px</div>
</body>
(12*dpr)px

【附：flexible.js】

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
(function flexible (window, document) {
    var docEl = document.documentElement
    var dpr = window.devicePixelRatio || 1

    // adjust body font size
    function setBodyFontSize () {
        if (document.body) {
            document.body.style.fontSize = (12 * dpr) + 'px'
        }
        else {
            document.addEventListener('DOMContentLoaded', setBodyFontSize)
        }
    }
    setBodyFontSize();

    // set 1rem = viewWidth / 10
    function setRemUnit () {
        var rem = docEl.clientWidth / 10
        docEl.style.fontSize = rem + 'px'
    }

    setRemUnit()

    // reset rem unit on page resize
    window.addEventListener('resize', setRemUnit)
    window.addEventListener('pageshow', function (e) {
        if (e.persisted) {
            setRemUnit()
        }
    })

    // detect 0.5px supports
    if (dpr >= 2) {
        var fakeBody = document.createElement('body')
        var testElement = document.createElement('div')
        testElement.style.border = '.5px solid transparent'
        fakeBody.appendChild(testElement)
        docEl.appendChild(fakeBody)
        if (testElement.offsetHeight === 1) {
            docEl.classList.add('hairlines')
        }
        docEl.removeChild(fakeBody)
    }
}(window, document))