rem布局在webview中页面错乱解决办法

最近做了个原生的小游戏,在浏览器和绝大部分手机上也正常,但在底层内核是IE的上面的都会有问题,查看代码,html的font-size设置正常,考虑是rem布局的问题,网上搜了搜发现原来是系统字体大小计算不一致的问题,这类问题常见于安卓设备上,在微信浏览器,qq浏览器,360浏览器,华为浏览器都是会遇到这种问题。

解决方案

方案一(获取系统字体大小)

一般设计稿750px,为了便于计算,设1rem = 100px; 也就是1rem = 1 * htmlFontSize (htmlFontSize 为 html 元素的字体大小),在iPhone6 375px宽的屏幕上,htmlFontSize 为50px。

其实,htmlFontSize 除了以px为单位外,还可以用百分比作为单位,比如你可以设置htmlFontSize的大小为312.5%,页面的布局效果与设置htmlFontSize 大小为50px是一样的效果。

那么问题来了,设置为百分比单位的时候,这个百分比值是怎么计算出来的呢?

浏览器默认字体大小为 16px,当我们使用百分比作为根节点 html 的字体大小时,rem 的计算方式就会改为

比如375像素宽设备上:

这与我们的实际情况相符,但是在有些 Android 手机上,浏览器或 webview 的默认字体是随着系统设置的字体改变的。

这样就会导致默认字体大于或小于16px。从这个思路出发,我们只需要找到系统设置的字体大小就可以正确的计算htmlFontSize的值了。

于是写一个函数来获取defaultFontSize的值:

然后再结合我们之前计算 htmlFontSize 的函数可以得到完整的计算方式:

亲测有效,可以一试!

方案二(获取html元素实际宽度)

之前搜索了很久,也没有看到很好的解决方案,包括像淘宝的flexible适配方案也没有解决这个问题,今天写文章的时候在搜索结果的后面几页,有一篇文章同样也是介绍这个问题的,解决思路还是有点不太一样的,这位同学是直接去获取html的实际大小和理想值的比值,然后做 htmlFontSize 的相应处理,这里一并给大家分享!

一般,我们动态计算好html的font-size之后,我们就啥都不干了,就走了。

但是,我们现在知道了,我们设置的大小不一定是真实的大小,所以,我们需要在设置完字体大小之后,再去重新获取一下html的font-size,看看实际的这个值,和我们设置的是不是一样。

如果不一样,就要根据比例再设置一次。

方案三(客户端固定webview字体大小)

推动移动端同学进行处理,在APP内直接设置webview的默认字体大小。

如:在每个webview配置webview.getSettings().setTextZoom(100)就可以了。

同样处理方式的有如微信,大家可以先修改下手机系统字体大小,然后再去体验微信里面的游戏/购物(这里是用web实现的),发现根本不会受影响(首先我查看源码看了下里面的页面,是用了rem布局的)。

其实我建议用第三种方案进行处理,因为这样体验更统一,但是想想,如果用户确实有调大字体的需求,或者有看小字体的习惯,用户设置字体大小,你就是不给人家任何变化,也是相当不好的体验呢。

来自:前端向朔 ,如有侵权,联系删除,谢谢!

未经允许不得转载:一点博客-青梅煮码-共享博客 » rem布局在webview中页面错乱解决办法
分享到:
赞(4) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏