webapp字号大小跟随系统字号大小缩放

hover_lew 发布于2019-08-30 15:55 / 590人阅读

摘要：和安卓同事商量后，他去获取系统放大的参数，然后将参数传递给内部，内部来自定义控制缩放。这种方案必须确保先让的适配先执行，然后判断是否是安卓，如果是安卓就执行方法才有效，否则会被里面的方法覆盖掉，造成页面先放大后缩小或者先缩小后放大的现象。

最近做了一个webapp项目，混合式开发，外部原生，内部webview嵌套H5页面。前端方面采用了vue开发，适配采用的是flexible+rem做的适配。本来一切都很好，可是吧，领导说客户有的年纪大，看不清字体，希望网页字体可以跟随系统字号大小变化。当时心里真是...，然无奈只能想办法解决问题，网上搜罗一圈都是禁止内部跟随系统字号变化，看来只能自己搞了。

第一种方案

最简单的让原生进行操作，内部不做控制，外部放大，里面自己适应。但是有问题，文本字体可以放大，有的输入框和输入框的内容却没有放大，故淘汰该方案。

第二种方案

外部原生webview让里面的放大缩小不跟随系统变化，内部自己控制。和安卓同事商量后，他去获取系统放大的参数，然后将参数传递给内部webapp，内部来自定义控制缩放。
代码如下：

setScaleFont(){
      let fontScale=1;
      let scaleFontSize;
      let initFontSize;
      fontScale=parseFloat(window._nativeMe.getFontScale());
      console.log(`缩放比例：${fontScale}`);
      let docHtml=document.getElementsByTagName("html")[0];
      initFontSize=this.getStyle(docHtml,"fontSize").split("px")[0];
      scaleFontSize=fontScale*initFontSize;//1-1.4等比缩放
      docHtml.style.fontSize=scaleFontSize +"px";
    },
    getStyle(obj, name){
      if(window.currentStyle){
        return obj.currentStyle[name];
      }
      else{
        return getComputedStyle(obj, false)[name];
      }
    }

先获取到初始的缩放比例，然后根据安卓原生传入的缩放比例改写html标签上的fontsize大小，由于采用了rem适配，自会根据根元素大小进行适配。这种方案必须确保先让flexible的适配先执行，然后判断是否是安卓，如果是安卓就执行setScaleFont方法才有效，否则会被flexible里面的方法覆盖掉，造成页面先放大后缩小或者先缩小后放大的现象。

如上图，我是注释掉了这段代码，不然就会产生上述放大缩小的现象。

结论

该种方法也只能在安卓上有效，苹果由于安全权限的问题无法获取系统字体的缩放比例，故无法调整，如果有大神知道在苹果上如何操作或者有别的更好办法，请告知，不胜感激。

混合云私有云 html设置字号大小 asp字号代码系统内存大小 linux 系统磁盘大小

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117131.html

webapp字号大小跟随系统字号大小缩放

摘要：和安卓同事商量后，他去获取系统放大的参数，然后将参数传递给内部，内部来自定义控制缩放。这种方案必须确保先让的适配先执行，然后判断是否是安卓，如果是安卓就执行方法才有效，否则会被里面的方法覆盖掉，造成页面先放大后缩小或者先缩小后放大的现象。最近做了一个webapp项目，混合式开发，外部原生，内部webview嵌套H5页面。前端方面采用了vue开发，适配采用的是flexible+rem做...

dendoink 2019-08-05 15:50 评论0 收藏0
如何更愉快地使用em —— 别说你懂CSS相对单位

摘要：相对单位的值会根据外部影响因素的变化而变化。很自然，相对单位使用起来会比较困难。在本章中，我将揭开相对单位的神秘面纱。重点来了，使用相对单位声明的值会由浏览器转化为一个绝对值，我们称之为计算值。 showImg(https://segmentfault.com/img/bVbdtsA); 前段时间试译了Keith J.Grant的CSS好书《CSS in Depth》，其中的第二章《W...

gekylin 2019-08-30 15:54 评论0 收藏0
如何更愉快地使用rem —— 别说你懂CSS相对单位

摘要：值得注意的是，这个设置对使用或其他绝对单位定义的字号大小无效。事实上，提供了一个在和间的相对单位折中解决方案，而且更易于使用。图使用相对单位和继承字号的面板下面是模板，加到你的页面吧。 showImg(https://segmentfault.com/img/bVbdOMr?w=920&h=450); 前段时间试译了Keith J.Grant的CSS好书《CSS in Depth》，其...

Snailclimb 2019-08-30 15:54 评论0 收藏0
前端基本功之从大型项目中迅速定位修改位置

摘要：前端开发，有一项很重要的基本功，就是在大型项目中，比如几万行代码中，迅速找到新增功能或调试的切入点。猜测输入框大小跟这个字号有关系。通过观察分析和断点技巧，我们很容易地就从一个大型项目几万行代码中迅速定位到我们要修改的地方。前端开发，有一项很重要的基本功，就是在大型项目中，比如几万行js代码中，迅速找到新增功能或调试bug的切入点。特别是你只是接手这个项目，并不了解其中每一个功能点所...

rubyshen 2019-08-22 17:32 评论0 收藏0
REM如何无视手机系统字号调整

摘要：经检查发现，中的值是正常值，但是出现了一个匪夷所思的情况页面上的以为例，在移动端内嵌中设置元素最终出来的高度竟然是。。。整个人就蒙圈了，然后突然灵光一闪，发现是系统的字号调大了。。。系统如何处理的这个展示还没有搞清楚。。。此问题属于REM的优化解决如下问题在移动端rem布局中，多数环境多数浏览器下rem的计算妥妥的没有问题，但是部分环境，比如某些软件内嵌的webvie...

王笑朝 2019-08-02 15:59 评论0 收藏0