移动端适配

最新推荐文章于 2025-05-16 10:23:47 发布

原创最新推荐文章于 2025-05-16 10:23:47 发布 · 148 阅读

0 ·

CC 4.0 BY-SA版权

移动端同时被 2 个专栏收录

1 篇文章

订阅专栏

1 篇文章

订阅专栏

博客围绕移动端适配问题展开，先介绍物理像素、设备独立像素、CSS像素、设备像素比和rem等基本概念，接着阐述淘宝lib - flexible库的flexible实现方案及1px物理像素的解决办法，最后介绍视口单位适配方案，还提及相关PostCss插件。

前言：这周工作碰到了移动端1px的问题。以前一直写样式也没有特别注意着一点。还有就是rem的原理。这些其实就是比较常见的移动端适配问题。现阶段比较主流的适配方案有二种。一种是flexible + rem,另一种是vw

下面我们来看一下具体情况

1、基本概念

在了解具体方案原理前，我们先来看一下一些基本概念：

1.1、物理像素(physical pixel)

物理像素又被称为设备像素，他是显示设备中一个最微小的物理部件。每个像素可以根据操作系统设置自己的颜色和亮度。

1.2、设备独立像素(density-independent pixel)

设备独立像素也称为密度无关像素，可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素)，然后由相关系统转换为物理像素。（老早在没有 retina 屏之前，设备独立像素与物理像素是相等的）

1.3、CSS像素

CSS像素是一个抽像的单位，主要使用在浏览器上，用来精确度量Web页面上的内容。一般情况之下，CSS像素称为与设备无关的像素(device-independent pixel)，简称DIPs。

1.4、设备像素比(device pixel ratio)

设备像素比简称为dpr，其定义了物理像素和设备独立像素的对应关系。它的值可以按下面的公式计算得到：

设备像素比 ＝ 物理像素 / 设备独立像素

在JavaScript中，可以通过window.devicePixelRatio获取到当前设备的dpr。而在CSS中，可以通过-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio进行媒体查询，对不同dpr的设备，做一些样式适配(这里只针对webkit内核的浏览器和webview)
因此在iphone 6、7、8 的 dpr 为 2的设备中，一个设备独立像素便为 4 个物理像素，因此在 css 上设置的 1px 在其屏幕上占据的是 2个物理像素，0.5px 对应的才是其所能展示的最小单位。

1.5、rem

简单的理解，rem就是相对于根元素<html>的font-size来做计算。而我们的方案中使用rem单位，是能轻易的根据<html>的ont-size计算出元素的盒模型大小。而这个特色对我们来说是特别的有益处。

2、flexible实现方案

了解了前面一些相关概念之后，接下来我们来看实际解决方案。淘宝有一个名叫lib-flexible的库，而这个库就是用来解决H5页面终端适配的。
我们把屏幕分成10等分，那么

物理像素为 750 = 375 * 2，那么 10rem = 750px，1rem = 75px;
物理像素为 1125 = 375 * 3，那么 10rem = 1125px，1rem = 112.5px ;
物理像素为 1242 = 414 * 3, 那么 10rem = 1242px，1rem = 124.2px;

function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 540) {
            width = 540 * dpr;
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }

2.1、1px的物理像素的解决方案

由此我们得到一个1px像素的解决方案。viewport 的 initial-scale 具有缩放页面的效果。对于 dpr=2 的屏幕，1px压缩一半便可与1px的设备像素比匹配，这就可以通过将缩放比 initial-scale 设置为 0.5=1/2 而实现。以此类推 dpr=3的屏幕可以将 initial-scale设置为 0.33=1/3 来实现。

<meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=0.5">

if (!metaEl) {
        metaEl = doc.createElement('meta');
        metaEl.setAttribute('name', 'viewport');
        metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
        if (docEl.firstElementChild) {
            docEl.firstElementChild.appendChild(metaEl);
        } else {
            var wrap = doc.createElement('div');
            wrap.appendChild(metaEl);
            doc.write(wrap.innerHTML);
        }
    }