• 安卓下设置系统字体大小影响H5页面布局


    问题描述:

      调整好的h5页面,放在安卓app内嵌页面后布局正常,后来用户调整系统里面字体大小,后内嵌H5布局乱掉

    问题分析:

      因为用户调整了系统字体的大小,修改了根节点和body节点的font-size,而我的单位和字体大小采用的是rem和em,所以根节点与body节点font-size的改变肯定会影响到我的字体的大小和单位长度的展现

    问题确认:

      初步分析问题后,需要真实的模拟环境,看看是否如我所说,根节点的font-size和body节点的font-size真的改变了,我在页面上面添加一个按钮,点击弹出根节点的font-size和body节点的font-size.经确认,body节点的font-size确实改变了,但是根节点的font-size并没有改变,这确定一个问题,因为我字体采用的是em,em单位自然和body节点的font-size有关,但是我的长度采用的是rem,而rem只和根节点的font-size有关,既然根节点的font-size并没有改变,那为什么我h5里面的长度改变了呢

    问题继续查找:

      正在我苦思冥想之际,突然发现我的一个元素宽度设置为360px(注意这个时候我的手机也是360px),而这个元素的宽度竟然不是撑满全屏,由此可以推断,当用户修改系统字体大小的时候,回动态修改1px所代表的实际像素。这个就属于系统级的了,如果是安卓app原生开发倒是可以采用dp为单位规避这个问题,但是我们h5只能用px

    问题再确认:

      首先是两个问题:

        1-字体大小改变,因为body节点font-size的变化影响到我以em为单位的字体大小

        2-单位长度改变,因为用户调整系统字体大小后,改变了在系统内部1px所代表的实际像素,所以使得我的长度与实际长度不服

    问题解决:

      如果有一个方法可以使得用户设置字体大小不干扰到我h5内部的字体就好了,果然,安卓提供了一个方法:webview.getSettings().setTextZoom(100),这个方法是设置webview内部字体的缩放比例,而字体单位是px,它其实设置的是px的缩放比例,我们通过强制设置为100%,来使得用户的外部设置干扰不到我们内部webview的字体大小呈现。而因为限制了px的缩放比例,我们的长度也最终得以正常呈现。

    注:对于em和ren原理不是很了解的同学可以参考:http://www.cnblogs.com/noobfly/p/6207832.html

  • 相关阅读:
    CVPR2021论文总结笔记
    目标跟踪综述:Correlation Filter for UAV-Based Aerial Tracking: A Review and Experimental Evaluation
    推荐 | Transformer最新成果!Learn to Dance with AIST++: Music Conditioned 3D Dance Generation!
    博士笔记 | 周志华《机器学习》手推笔记第三章-线性模型
    博士笔记 | 周志华《机器学习》手推笔记第二章-模型评估与选择
    WebSocket实现前后端通讯
    Mac使用终端玩小游戏
    算法-栈队列堆
    架构
    算法-数组与矩阵
  • 原文地址:https://www.cnblogs.com/mrzhu/p/6808536.html
Copyright © 2020-2023  润新知