weex屏幕适配的问题怎么解决?

查看:358
本文介绍了weex屏幕适配的问题怎么解决?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

问 题

环境:vue,最新的sdk, 发现在iPhone plus 这些手机上,字体,高度都被拉伸了,画面非常粗燥。
实际上在 github 的issue去年就有人提出来了,怎么解决?
https://github.com/alibaba/we...
在少于750宽度的屏幕下,字体、间距、宽度、高度变小这种问题怎么解决?在5s看到页面是变小的,在6plus又是变大的,导致app的weex页面跟原生其他页面不一致。。。
var height = 88 * 750 / env.deviceWidth 这样写可以适配,但是,这样的话每个样式都需要定义一个变量,然后计算一次,这样很麻烦。有没有统一的处理?.we文件还是按正常的写多少px,然后有个预处理的公式进行统一转换?css的预处理?求助啊!

https://github.com/alibaba/we...
weex中的说明:
In order to simplify the page design and the complete underlying implementation, the width of our default screen is unified to 750 pixels, different screens should be scaled with corresponding ratio.

也就是说weex的元素在所有的屏幕中使用的放大缩小来进行屏幕适配的,源码中也有大量的同WXScreenResizeRadio的计算,所以我们现在开发的app包括官方的weex playground,在iphone5s中看起来比较精致,但一到iphone 6plus上,界面一拉大,扑面而来一股粗糙之感,。。。。。不能忍啊。。

我们想对我们的元素在不同的屏幕上限定死大小,请问有什么好的办法?

解决方案

通过分析weex源码,发现新增了长度的单位: wx,比如vue中设置text的fontSize:14wx,在iOS中遇到单位后缀wx时,直接返回fontSize为14,而不会通过scale进行动态计算,即可实现在不同屏幕上时适配。

这篇关于weex屏幕适配的问题怎么解决?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆