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 相关文章推荐
CSS3教程(9):设置RGB颜色
Apr 02 HTML / CSS
轻松掌握CSS3中的字体大小单位rem的使用方法
May 24 HTML / CSS
CSS3实现歌词进度文字颜色填充变化动态效果的思路详解
Jun 02 HTML / CSS
CSS3中的弹性布局em运用入门详解 1em等于多少像素
Feb 08 HTML / CSS
HTML5 video标签(播放器)学习笔记(二):播放控制
Apr 24 HTML / CSS
HTML5中的进度条progress元素简介及兼容性处理
Jun 02 HTML / CSS
基于HTML5 Canvas的3D动态Chart图表的示例
Nov 02 HTML / CSS
HTML5 Web缓存和运用程序缓存(cookie,session)
Jan 11 HTML / CSS
HTML5触摸事件实现移动端简易进度条的实现方法
May 04 HTML / CSS
AmazeUI 面板的实现示例
Aug 17 HTML / CSS
仅仅使用 HTML/CSS 实现各类进度条的方式汇总
Nov 11 HTML / CSS
css常用字体属性与背景属性介绍
Feb 28 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
理解php原理的opcodes(操作码)
2010/10/26 PHP
php 深入理解strtotime函数的使用详解
2013/05/23 PHP
thinkphp3.2实现上传图片的控制器方法
2016/04/28 PHP
PHP使用反向Ajax技术实现在线客服系统详解
2019/07/01 PHP
禁止F5等快捷键的JS代码
2007/03/06 Javascript
js中parseFloat(参数1,参数2)定义和用法及注意事项
2013/01/27 Javascript
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
2013/12/26 Javascript
经过绑定元素时会多次触发mouseover和mouseout事件
2014/02/28 Javascript
JS截取url中问号后面参数的值信息
2014/04/29 Javascript
ext前台接收action传过来的json数据示例
2014/06/17 Javascript
JavaScript中逗号运算符介绍及使用示例
2015/03/13 Javascript
深入理解JavaScript 函数
2016/06/06 Javascript
jQuery web 组件 后台日历价格、库存设置的代码
2016/10/14 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
2016/12/26 Javascript
React中ES5与ES6写法的区别总结
2017/04/21 Javascript
微信小程序实现顶部选项卡(swiper)
2020/06/19 Javascript
原生JS实现移动端web轮播图详解(结合Tween算法造轮子)
2017/09/10 Javascript
jQuery ajax读取本地json文件的实例
2017/10/31 jQuery
js 判断一个数字是不是2的n次方幂的实例
2017/11/26 Javascript
基于Swiper实现移动端页面图片轮播效果
2017/12/28 Javascript
Vue实现简易翻页效果源码分享
2018/11/08 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
2020/08/04 Javascript
通过实例解析JavaScript常用排序算法
2020/09/02 Javascript
Python按行读取文件的简单实现方法
2016/06/22 Python
对numpy Array [: ,] 的取值方法详解
2018/07/02 Python
解决Djang2.0.1中的reverse导入失败的问题
2019/08/16 Python
Python 爬取淘宝商品信息栏目的实现
2021/02/06 Python
Lookfantastic希腊官网:英国知名美妆购物网站
2018/09/15 全球购物
生产经理的自我评价分享
2013/11/07 职场文书
大课间体育活动方案
2014/03/12 职场文书
大学应届毕业生求职信
2014/05/24 职场文书
工作时间调整通知
2015/04/24 职场文书
解决Navicat for Mysql连接报错1251的问题(连接失败)
2021/05/27 MySQL
Python 中random 库的详细使用
2021/06/03 Python
oracle连接ODBC sqlserver数据源的详细步骤
2021/07/25 Oracle
redis击穿 雪崩 穿透超详细解决方案梳理
2022/03/17 Redis