h5开发移动端APP，屏幕设配的问题

来源：互联网发布：第三方软件测试 c语言编辑：程序博客网时间：2024/06/06 12:53

首先，我们来区分几个物理尺度上的概念：物理像素、设备独立像素、CSS像素、屏幕密度。

1.物理像素(physical pixel)
物理像素又被称为设备像素，他是显示设备中一个最微小的物理部件。每个像素可以根据操作系统设置自己的颜色和亮度。正是这些设备像素的微小距离欺骗了我们肉眼看到的图像效果。

2.设备独立像素(density-independent pixel)
设备独立像素也称为密度无关像素，可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素)，然后由相关系统转换为物理像素。

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

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)。

常用的一些手机设备
这里写图片描述

众所周知，iPhone6的设备宽度和高度为375pt * 667pt,可以理解为设备的独立像素；而其dpr为2，根据上面公式，我们可以很轻松得知其物理像素为750pt * 1334pt。
因此，在普通屏幕下1个CSS像素对应1个物理像素，而在Retina屏幕下，1个CSS像素对应的却是4个物理像素。

进入正题
1.引入lib-flexible的库
本质:

1.动态改写<meta>标签2.给<html>元素添加data-dpr属性，并且动态改写data-dpr的值3.给<html>元素添加font-size属性，并且动态改写font-size的值

<script src="build/flexible_css.debug.js"></script><script src="build/flexible.debug.js"></script>

2.<meta>标签

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

参考文献
1.https://github.com/amfe/article/issues/17
2.https://github.com/amfe/lib-flexible

阅读全文

0 0