请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册
搜索

技术分享 快应用像素与像素换算方法

0
回复
198
查看
[复制链接]

3

主题

15

帖子

90

积分

 楼主| 2019-12-5 10:59:42 显示全部楼层 |阅读模式
本帖最后由 这叫什么事啊 于 2019-12-5 20:32 编辑

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

前置知识
快应用是一种hybrid开发技术,在渲染上使用的是原生渲染,所以要涉及到一些安卓原生的渲染单位。安卓的渲染单位是dp。
dp是什么概念呢,假设手机你的分辨率为1080x1920,手机的dpr是3。此时打开浏览器进入全屏模式,最多展示 1080 / 3 = 360px的内容,超出则出现滚动条。
这里有一个公式:
  1. 手机分辨率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和设备分辨率。通过计算可以获取最小宽度。

总结
快应用的像素是一个相对概念,如果你能耐下心来阅读本文,那么对快应用或者Web像素概念会有新的体会。

想学习更多知识,请关注我的微信公众号



回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册