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简单练习实现遨游浏览器logo的绘制
Jan 30 HTML / CSS
CSS的pointer-events属性详细介绍(作用和注意事项)
Apr 23 HTML / CSS
基于css3的属性transition制作菜单导航效果
Sep 01 HTML / CSS
HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
Aug 02 HTML / CSS
HTML5 Canvas中绘制椭圆的4种方法
Apr 24 HTML / CSS
使用分层画布来优化HTML5渲染的教程
May 08 HTML / CSS
html5 input输入实时检测以及延时优化
Jul 18 HTML / CSS
canvas绘制太极图的实现示例
Apr 29 HTML / CSS
AmazeUI底部导航栏与分享按钮的示例代码
Aug 18 HTML / CSS
html+css实现分层金字塔的实例
Jun 02 HTML / CSS
使用CSS实现六边形的图片效果
Aug 05 HTML / CSS
html原生table实现合并单元格以及合并表头的示例代码
May 07 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
ThinkPHP跳转页success及error模板实例教程
2014/07/17 PHP
3款值得推荐的微信开发开源框架
2014/10/28 PHP
php中ltrim()、rtrim()与trim()删除字符空格实例
2014/11/25 PHP
WordPress中is_singular()函数简介
2015/02/05 PHP
PHP Ajax跨域问题解决方案代码实例
2020/08/01 PHP
Javascript操纵Cookie实现购物车程序
2006/11/23 Javascript
Js日期选择自动填充到输入框(界面漂亮兼容火狐)
2013/08/02 Javascript
javascript删除字符串最后一个字符
2014/01/14 Javascript
JS代码实现table数据分页效果
2016/05/26 Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
2016/12/28 Javascript
Linux CentOS系统下安装node.js与express的方法
2017/04/01 Javascript
Vue2单一事件管理组件通信
2017/05/09 Javascript
vue使用drag与drop实现拖拽的示例代码
2017/09/07 Javascript
vue路由跳转传递参数的方式总结
2020/05/10 Javascript
[00:55]2015国际邀请赛中国区预选赛5月23日——28日约战上海
2015/05/25 DOTA
Django Highcharts制作图表
2016/08/27 Python
Python探索之Metaclass初步了解
2017/10/28 Python
Python3之简单搭建自带服务器的实例讲解
2018/06/04 Python
django认证系统实现自定义权限管理的方法
2018/07/16 Python
Python第三方库h5py_读取mat文件并显示值的方法
2019/02/08 Python
python 判断字符串中是否含有汉字或非汉字的实例
2019/07/15 Python
tensorflow 实现从checkpoint中获取graph信息
2020/02/10 Python
Python利用for循环打印星号三角形的案例
2020/04/12 Python
Mac PyCharm中的.gitignore 安装设置教程
2020/04/16 Python
django中嵌套的try-except实例
2020/05/21 Python
Python文件操作模拟用户登陆代码实例
2020/06/09 Python
Python unittest生成测试报告过程解析
2020/09/08 Python
css3学习之2D转换功能详解
2016/12/23 HTML / CSS
CSS3的Flexbox布局的简明入门指南
2016/04/08 HTML / CSS
Public Desire美国/加拿大:全球性的在线鞋类品牌
2018/12/17 全球购物
测绘工程专业个人自我评价
2013/12/01 职场文书
幼儿园园长安全责任书
2015/05/08 职场文书
电话营销开场白
2015/05/29 职场文书
2015年车间管理工作总结
2015/07/23 职场文书
Go各时间字符串使用解析
2021/04/02 Golang
python 下载文件的几种方式分享
2021/04/07 Python