快应用像素与像素换算方法

来源：快应用论坛

作者：这叫什么事啊

前言

开发者在进行快应用开发的时候，会遇到一些与WEB行为不一致的地方。像素就是其中之一，今天就给大家分享一下相关知识。

前置知识

快应用是一种hybrid开发技术，在渲染上使用的是原生渲染，所以要涉及到一些安卓原生的渲染单位。安卓的渲染单位是dp。

dp是什么概念呢，假设手机你的分辨率为1080x1920，手机的dpr是3。此时打开浏览器进入全屏模式，最多展示 1080 / 3 = 360px的内容，超出则出现滚动条。
这里有一个公式：

手机分辨率w  /  dpr =  最小宽度x (单位是dp)

使用adb命令可以修改手机分辨率和最小宽度，随之而来的是dpr也跟着动态变化。因此手机的dpr不是固定的，是通过手机分辨率和最小宽度算出来的。

快应用单位

在1050及以前版本的快应用中，可以在manifest.json文件中设置designWidth属性，如果没设置则默认为750。750这个概念跟dp和像素都没有关系，它的意思是，如果当前的设备的最小宽度是 X dp，那么每一个快应用的px单位就是 X / 750 dp，即在快应用中设置一个元素是 100px，其在设备上显示的大小实际上是 100 * X / 750，这样所有设备上展示的快应用都是等比缩放的，看起来差不多，可以做到简单适配。

带来的问题

在所有的设备上看起来都差不多，做到了简单适配。但是实际上我们真的需要这样吗？一个简单的例子：我们在ipad等大设备上，希望可以看到更多的内容而不是等比例放大。那么该怎么办呢？

如何解决

在1060中，我们引入了一个新的解决方案。通过设置manifest.json文件的designWidth字段为device-width属性解决。这个新增的属性代表快应用像素不再是按照一个常数进行分割了，此时1px对应1dp。举个例子，在快应用内设置一个100px的元素。在小手机（若最小宽度为360dp）上展示为 100 * 360 / 360 = 100，在大手机（若最小宽度为720dp）上展示为100 * 720 / 720 = 100。同一个元素在两个手机上都展示100dp，但是一个占比 100 / 360，另一个占比 100 / 720。显示的效果是不一样的。此方案要配合后续的media-query规范进行适配，media-query能力大概在1080版本支持。

如何获取dpr、设备分辨率、最小宽度

通过device接口的getInfo方法可以拿到dpr和设备分辨率。通过计算可以获取最小宽度。