出现这个问题,有以下因素

你的页面采用了rem单位,并且是采用js动态计算html的font-size
你的页面被加在了APP中的webview中
这该死的手机被重设了字体大小
解决方法
一般,我们动态计算好html的font-size之后,我们就啥都不干了,就走了。但是,我们现在知道了,我们设置的大小不一定是真实的大小,所以,我们需要在设置完字体大小之后,再去重新获取一下html的font-size,看看实际的这个值,和我们设置的是不是一样。如果不一样,就要根据比例再设置一次。

以下是我的完整代码:

function htmlFontSize(){
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var width = w > h ? h : w;
width = width > 720 ? 720 : width
var fz = ~~(width*100000/36)/10000
document.getElementsByTagName("html")[0].style.cssText = 'font-size: ' + fz +"px";
var realfz = ~~(+window.getComputedStyle(document.getElementsByTagName("html")[0]).fontSize.replace('px','')*10000)/10000
if (fz !== realfz) {
document.getElementsByTagName("html")[0].style.cssText = 'font-size: ' + fz * (fz / realfz) +"px";
}
}

解决方法二:

解决办法:安卓客户端通过webview配置webview.getSettings().setTextZoom(100)就可以禁止缩放,按照百分百显示。

因为手机设置字体大小导致h5页面在webview中变形的BUG的更多相关文章

  1. 解决因为手机设置字体大小导致h5页面在webview中变形的BUG

    首先,我们做了一个H5页面,在各种手机浏览器中打开都没问题.我们采用了rem单位进行布局,通过JS来动态计算网页的视窗宽度,动态设置html的font-size,一切都比较完美. 这时候,你自信满满的 ...

  2. 安卓下设置系统字体大小影响H5页面布局

    问题描述: 调整好的h5页面,放在安卓app内嵌页面后布局正常,后来用户调整系统里面字体大小,后内嵌H5布局乱掉 问题分析: 因为用户调整了系统字体的大小,修改了根节点和body节点的font-siz ...

  3. rem在三星s5部分机型情况下 设置的字体大小与手机实际字体大小不一致问题

    rem在三星s5部分机型情况下 设置的字体大小与手机实际字体大小不一致问题 判断是特殊机型,做特殊处理. var u=navigator.userAgent; if($(window).width() ...

  4. 【转】CSS3的REM设置字体大小

    rem 长度单位   在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激烈的争论着,有人说PX做为单位好,有人说EM优点多,还有人在说百分比方便,以至于出现了CSS Font-Size: ...

  5. CSS3的REM设置字体大小

    在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激烈的争论着,有人说PX做为单位好,有人说EM优点多,还有人在说百分比方便,以至于出现了CSS Font-Size: em vs. px v ...

  6. Android: TextView 及其子类通过代码和 XML 设置字体大小的存在差异的分析

    原因: 在代码中通过 setTextSize(float size) 设置,使用的是 sp 为默认单位. 而 XML 中使用了 px,所以需要使用先把做好 sp 和 px 的转换工作. 最近在做 ap ...

  7. Android Studio升级到0.8.1后怎样设置字体大小?

    升级到0.8.1后.打开设置字体大小页面.你会发现无论是Default还是Darcula,都不同意你改变字体的大小.事实上这个是由于这两个模式是Android Studio自带模式,所以不同意你修改, ...

  8. eclipse怎么设置字体大小

    eclipse怎么设置字体大小

  9. 【转】eclipse怎么设置字体大小

    原文网址:http://jingyan.baidu.com/article/f96699bb9442f3894e3c1b15.html 1. 打开eclipse,找到window 2.  点击后在下拉 ...

随机推荐

  1. C语言:进制转化

    16进制数4321转10进制:原来方法 =4*16^3+3*16^2+2*16^1+1*16^0 =4*16^3+3*16^2+2*16^1+1 =16*(4*16^2+3*16^1+2)+1 =16 ...

  2. java测试银行系统源代码

    1 package Kaoshi; 2 3 /*信1705-3 20173442 田昕可*/ 4 import java.util.*; 5 import java.io.*; 6 7 class A ...

  3. js浮点数保留位数方法封装

    大家在平时业务中应该经常跟小数打交道吧,有没有被小数点的保留位数问题搞得头疼啊.比如,保留一位小数,保留俩位小数,保留三位小数,向上取整.四舍五入等等. 而我最近在项目中正好遇到类似的问题:有的地方要 ...

  4. React 之 组件生命周期

    React 之 组件生命周期 理解1) 组件对象从创建到死亡它会经历特定的生命周期阶段2) React组件对象包含一系列的勾子函数(生命周期回调函数), 在生命周期特定时刻回调3) 我们在定义组件时, ...

  5. JavaScript实现拖放效果

    JavaScript实现拖放效果 笔者实现该效果也是套用别人的轮子的.传送门 然后厚颜无耻的贴别人的readme~,笔者为了方便查阅就直接贴了,有不想移步的可以看这篇.不过还是最好请到原作者的GitH ...

  6. Guava - Map

    创建Map 通常在创建map时使用new HashMap<>();的方法,guava提供了一个简洁的方法 Maps.newHashMap(); List转换Map List<Solu ...

  7. Redis主从复制那点事

    ​     我们在 Redis持久化机制你学会了吗?学习了AOF和RDB,如果Redis宕机,他们分别通过回放日志和重新读入RDB文件的方式恢复数据,从而提高可靠性.我们今天来想这么一个问题,假如我们 ...

  8. Windows7/10 防火墙开放Oracle数据库1521端口

    安装Oracle 12C数据库,在局域网中,允许其他电脑访问,则需要开启防火墙的 1521端口 ==================================================== ...

  9. RegOpenKeyEx

    对注册表的操作是通过句柄来完成的,在对某个键下的键值进行操作的时候首先将该键进行打开,然后使用键句柄进行引用该键,操作完后要进行关闭: 注册键的根键不需要打开,他们的句柄是固定的,直接拿来用就是了. ...

  10. [源码解析] 机器学习参数服务器ps-lite (1) ----- PostOffice

    [源码解析] 机器学习参数服务器ps-lite 之(1) ----- PostOffice 目录 [源码解析] 机器学习参数服务器ps-lite 之(1) ----- PostOffice 0x00 ...