如何消除手机设置的字体大小对Cordova app(Android)界面font-size的影响
===================== 更新分割线 ===================
现在发现其实不需要用安卓编辑器打开,也能找到这个文件,路径是platforms\android\CordovaLib\src\org\apache\cordova\engine\SystemWebViewEngine.java,用任意编辑器打开修改即可。
===================== 以下是原文 ===================
最近在用vue+cordova做一个app,前期一直在PC上看效果,今天试着打包成了app,想看看在手机上运行的效果。结果发现和预期的效果不一样,很多布局有一些错位。可是明明我在PC上调试的时候,有切换不同型号的手机看效果的,都没有问题,排版和布局也都是用的rem,按道理应该显示效果不会出现那么大的纰漏的。
后来发现是因为我修改设置了手机的显示字体大小的,如果我将手机字体大小改为标准的,则显示效果就正常了,所以我就在网上搜索了一下消除这种影响的解决办法,百度到了这么一个方法:
webView.getSettings().setTextZoom(100);
这行代码的作用主要是设置webview里的字体不跟随系统字体发生改变。
好了,解决办法有了,那么问题来了,在哪里加上这行代码呢?我不懂原生代码,也是刚刚开始接触hybrid app和cordova,知道这个得在安卓代码里改,可是却不知道去哪里改。然后我可爱的老公帮我解决了,手动表白老公❤ @吃馒头的火鸡。
下面附上如何添加此代码:
用过cordova的朋友知道,用cordova打包app之前,先要添加一个platform,我这里添加的是Android平台,添加以后,其实就是生成了一个安卓的解决方案工程,将这个工程用Android Studio(其他的可开发安卓的编辑器应该也行)打开,就能看到里面的java代码。
找到 CordovaLib\java\org.apache.cordova\engine\SystemWebViewEngine.java 文件,里面有一个 initWebViewSettings 方法,在里面可以对webView进行一些修改。
webView.setInitialScale(0);
webView.setVerticalScrollBarEnabled(false);
// Enable JavaScript
final WebSettings settings = webView.getSettings();
settings.setJavaScriptEnabled(true);
settings.setJavaScriptCanOpenWindowsAutomatically(true);
settings.setLayoutAlgorithm(LayoutAlgorithm.NORMAL);
这是其内部其中的一部分代码,我们紧接着这些代码之后追加设置字体的代码即可,因为这里面有把webView.getSettings()赋值给settings变量,所以我们只需在其后追加
settings.setTextZoom(100);
即可。
ok,保存一下,重新打包app,完美解决。
如何消除手机设置的字体大小对Cordova app(Android)界面font-size的影响的更多相关文章
- Intellij IDEA如何设置快速调整字体大小的快捷键
Intellij IDEA快速调整字体大小的快捷键 第一种方法(方便) 单击左上角File,找到Settings并点击.(当然也可以直接Alt+Ctrl+s) 点击Editor下的General,勾选 ...
- rem在三星s5部分机型情况下 设置的字体大小与手机实际字体大小不一致问题
rem在三星s5部分机型情况下 设置的字体大小与手机实际字体大小不一致问题 判断是特殊机型,做特殊处理. var u=navigator.userAgent; if($(window).width() ...
- 设置MyEclipse字体大小
设置MyEclipse字体大小
- [Android] 字体使用dp单位避免设置系统字体大小对排版的影响
[Android] 字体使用dp单位避免设置系统字体大小对排版的影响 以魄族mx3为例,在设置->显示->字体大小中能够选择字号大小例如以下图: 图1. 魄族mx3 会导致软件在有固定定高 ...
- Android系统移植与调试之------->如何修改Android默认字体大小和设置里面字体大小比例
因为我修改 ro.sf.lcd_density的值,将它从160修改 为120,所以导致整个系统的字体都变得很小.因此需要将整个字体变大,并且在设置-->显示-->字体大小的4个选项的值都 ...
- 安卓下设置系统字体大小影响H5页面布局
问题描述: 调整好的h5页面,放在安卓app内嵌页面后布局正常,后来用户调整系统里面字体大小,后内嵌H5布局乱掉 问题分析: 因为用户调整了系统字体的大小,修改了根节点和body节点的font-siz ...
- 设置同样字体大小,chrome浏览器有时字体偏大的解决办法(转)
本文是找了在网上搜了好久才找到非常棒的一篇文章,很好的解决了这个问题. 原文地址:https://github.com/amfe/article/issues/10 这个特性被称做「Text Auto ...
- [转]响应式网页设计:rem、em设置网页字体大小自适应
本文转自:http://www.cnblogs.com/aimyfly/archive/2013/07/19/3200742.html 「rem」是指根元素(root element,html)的字体 ...
- 响应式网页:用em,rem设置网页字体大小自适应
「rem」是指根元素(root element,html)的字体大小,好开心的是,从遥远的 IE6 到版本帝 Chrome 他们都约好了,根元素默认的 font-size 都是 16px.这样一个新的 ...
随机推荐
- React Native——组件FlatList
属性 添加头部组件 ListHeaderComponent属性用来给FlatList添加头部组件 简单使用: //ES6之前写法 _header = function () { return ( &l ...
- 洛谷 P4097 [HEOI2013]Segment 解题报告
P4097 [HEOI2013]Segment 题目描述 要求在平面直角坐标系下维护两个操作: 在平面上加入一条线段.记第 \(i\) 条被插入的线段的标号为 \(i\) 给定一个数 \(k\),询问 ...
- NodeJS - Express 4.0错误:Cannot read property 'Store' of undefined
按着<NodeJS开发指南>里的第五章建立microblog的例子操作,使用node.js 的express框架配置将session存储到mongodb时出错:TypeError: Can ...
- Python--Django学习笔记1
Django:The Web framework for perfectionists with deadlines Django是一个Python语言开发的高级Web框架,采用MVC架构,通过配置可 ...
- Elasticsearch 基础知识要点与性能监控
本文的来源是我翻译国外的一篇技术博客,感谢原作者Emily Chang,原文地址通过如下的知识,我们能大致学到关于ES的一些基本知识,进而对elasticsearch的性能进行监控和调优 注意elas ...
- Logstash 解析Json字符串,删除json嵌套字段
一.场景:此文以一个简单的json字符串文件为例,描述如何用logstash解析嵌套的json,并删除其中的某些字段 我们在linux中test.json的内容如下: {"timestamp ...
- Luogu 1314 【NOIP2011】聪明的质检员 (二分)
Luogu 1314 [NOIP2011]聪明的质检员 (二分) Description 小 T 是一名质量监督员,最近负责检验一批矿产的质量.这批矿产共有n个矿石,从 1 到n逐一编号,每个矿石都有 ...
- win32: 查询滚动条相关信息的注意事项
今天打算判断一个窗口是否出现垂直滚动条,我的代码: SCROLLINFO si; //滚动条信息结构体 si.cbSize = sizeof(SCROLLINFO ...
- 3分钟学会sessionStorage用法
前言: 因最近移动端开发过程中遇到一个运营提出的所谓技术难点需求,对于原生APP来说轻而易举,毕竟自己的APP用户操作指哪打哪,但是H5该怎么做?H5就实现不了么?对于一个爱研究攻克这些前端棘手问题的 ...
- 在kubernetes中运行单节点有状态MySQL应用
Deploy MySQL https://kubernetes.io/docs/tasks/run-application/run-single-instance-stateful-applicati ...