webapp字号大小跟随系统字号大小缩放的示例代码


Posted in HTML / CSS onDecember 26, 2018

最近做了一个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里面的方法覆盖掉,造成页面先放大后缩小或者先缩小后放大的现象。

webapp字号大小跟随系统字号大小缩放的示例代码

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

结论

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
用CSS禁用输入法(CSS3 UI规范)实例解析
Dec 04 HTML / CSS
基于CSS3实现的黑色个性导航菜单效果
Sep 14 HTML / CSS
基于css3 animate制作绚丽的动画效果
Nov 24 HTML / CSS
自定义html标记替换html5新增元素
Oct 17 HTML / CSS
HTML5在canvas中绘制复杂形状附效果截图
Jun 23 HTML / CSS
处理HTML5新标签的浏览器兼容版问题
Mar 13 HTML / CSS
深入理解HTML5定时器requestAnimationFrame的使用
Dec 12 HTML / CSS
怎样实现H5+CSS3手指滑动切换图片的示例代码
May 05 HTML / CSS
关于iframe跨域使用postMessage的实现
Oct 29 HTML / CSS
HTML5图片层叠的实现示例
Jul 07 HTML / CSS
前端H5 Video常见使用场景简介
Aug 21 HTML / CSS
用position:sticky完美解决小程序吸顶问题的实现方法
Apr 24 HTML / CSS
HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量)
Jan 05 #HTML / CSS
HTML5实现表单自动验证功能实例代码
Jan 11 #HTML / CSS
HTML5 File接口在web页面上使用文件下载
Feb 27 #HTML / CSS
使用phonegap检测网络状态的方法
Mar 30 #HTML / CSS
HTML5文档结构标签
Apr 21 #HTML / CSS
HTML5的文档结构和新增标签完全解析
Apr 21 #HTML / CSS
html5的localstorage详解
May 09 #HTML / CSS
You might like
PHP5常用函数列表(分享)
2013/06/07 PHP
php读取目录所有文件信息dir示例
2014/03/18 PHP
php动态函数调用方法
2015/05/21 PHP
php利用ffmpeg提取视频中音频与视频画面的方法详解
2017/06/07 PHP
JMenuTab简单使用说明
2008/03/13 Javascript
js类的静态属性和实例属性的理解
2009/10/01 Javascript
Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
2010/03/16 Javascript
JSON.stringify 语法实例讲解
2012/03/14 Javascript
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
2013/01/27 Javascript
基于NodeJS的前后端分离的思考与实践(二)模版探索
2014/09/26 NodeJs
jQuery 中$(this).index与$.each的使用指南
2014/11/20 Javascript
js中hash和ico的关联分析
2015/02/05 Javascript
jQuery实现模仿微博下拉滚动条加载数据效果
2015/12/25 Javascript
JS中生成随机数的用法及相关函数
2016/01/09 Javascript
Vue.js每天必学之Class与样式绑定
2016/09/05 Javascript
jQuery上传多张图片带进度条样式(DEMO)
2017/03/02 Javascript
AngularJS学习笔记之表单验证功能实例详解
2017/07/06 Javascript
Angularjs使用过滤器完成排序功能
2017/09/20 Javascript
vue cli使用绝对路径引用图片问题的解决
2017/12/06 Javascript
详解使用VueJS开发项目中的兼容问题
2018/08/02 Javascript
vue实现鼠标经过动画
2019/10/16 Javascript
python进程池实现的多进程文件夹copy器完整示例
2019/11/27 Python
Django中ORM找出内容不为空的数据实例
2020/05/20 Python
python中线程和进程有何区别
2020/06/17 Python
Python logging模块原理解析及应用
2020/08/13 Python
ivx平台开发之不用代码实现一个九宫格抽奖功能
2021/01/27 HTML / CSS
Myprotein芬兰官网:欧洲第一运动营养品牌
2019/05/05 全球购物
Visual-Click葡萄牙:欧洲领先的在线眼镜商
2020/02/17 全球购物
护理专业本科生自荐信
2013/10/01 职场文书
购房意向书
2014/04/01 职场文书
工地门卫岗位职责范本
2014/07/01 职场文书
党的群众路线教育实践活动查摆问题自查报告
2014/10/10 职场文书
校本研修个人总结
2015/02/28 职场文书
给校长的建议书范文
2015/09/14 职场文书
《中国机长》观后感:敬畏生命,敬畏职责
2019/11/12 职场文书
前端JS获取URL参数的4种方法总结
2022/04/05 Javascript