移动端页面适配———多方案解析 在移动互联网快速发展的今天,手机的种类和尺寸越来越多,作为前端的小伙伴们可能会越来越头疼,但又不得不去适配一款又一款的新机型。对于移动端适配,不同的公司、不同的团队有不同的解决方案。我在项目中也用了一部分解决方案,也看到了一些解决方案,对比下,总结一些自己的理解,希望对各位有帮助,找到最适合你们项目的适配方案。 下面是一些基础概念的讲解,帮助理解各种适配方案实现。 像素: 1、物理像素(设备像素) 屏幕的物理像素,又被称为设备像素,他是显示设备中一个最微小的物理部件。任何设备屏幕的物理像素出厂时就确定了,且固定不变的。 2、设备独立像素 设备独立像素也称为密度无关像素,可以认为是计算机坐标系统中的一个点,这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素),然后由相关系统转换为物理像素。 3、设备像素比 设备像素比简称为dpr,其定义了物理像素和设备独立像素的对应关系 设备像素比 = 物理像素 / 设备独立像素 以iphone6为例: iphone6的设备宽和高为375pt * 667pt,可以理解为设备的独立像素,而其设备像素比为2.固有设备像素为750pt * 1334pt 通过:window.devicePixelRatio获得。 设备像素比是区别是否是高清屏的标准,dpr大于1时就为高清屏,一般情况下dpr为整数