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

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

你的页面采用了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)就可以禁止缩放,按照百分百显示。

原文地址:https://www.cnblogs.com/zcpblog/p/11325537.html

时间: 2024-10-01 04:26:08

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

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

首先,我们做了一个H5页面,在各种手机浏览器中打开都没问题.我们采用了rem单位进行布局,通过JS来动态计算网页的视窗宽度,动态设置html的font-size,一切都比较完美. 这时候,你自信满满的将h5地址交给了APP工程师,做了一个WEBVIEW嵌套,然后就顺利交工了. 测试组在一堆手机中测试APP,突然,在某个手机上打开,你的页面布局了乱了,字变大或者变小,总之很奇葩. 你怀疑是APP的问题,但是客户端死活不承认.你在该手机浏览器中查看,确保没有一毛钱问题,也死活不承认是你的问题.于是测

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

升级到0.8.1后.打开设置字体大小页面.你会发现无论是Default还是Darcula,都不同意你改变字体的大小.事实上这个是由于这两个模式是Android Studio自带模式,所以不同意你修改,你要改的话要自己定义自己的模式.例如以下图: 选中一个你想要的样式,然后点击Save as,然后在弹出的对话框中输入你自定义的样式的名称. 然后再把Scheme name选择成你自己定义的样式,这个时候就能够改了.

CSS3的REM设置字体大小(转)

在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激烈的争论着,有人说PX做为单位好,有人说EM优点多,还有人在说百分比方便,以至于出现了CSS Font-Size: em vs. px vs. pt vs. percent这样的PK大局.不幸的是,仍然有不同的利弊,使各种技术都不太理想,但又无法不去用.真是进也难,退也难呀. 最近在学习em的相关知识的时候,无意之间让我拾得一宝,就是使用rem来设置Web页面的字体大小.让我一下子就来劲了,一口气看完并测试了一回,还真是爽歪歪的呀.师

Android Studio升级到0.8.1后如何设置字体大小?

升级到0.8.1后,打开设置字体大小页面,你会发现不管是Default还是Darcula,都不允许你改变字体的大小,其实这个是因为这两个模式是Android Studio自带模式,所以不允许你改动,你要改的话要自定义自己的模式.如下图: 选中一个你想要的样式,然后点击Save as,然后在弹出的对话框中输入你自己定义的样式的名称. 然后再把Scheme name选择成你自定义的样式,这个时候就可以改了. Android Studio升级到0.8.1后如何设置字体大小?,布布扣,bubuko.co

浅谈设置字体大小

浅谈设置字体大小 前言 如果设置字体用的是[UIFontsystemFontOfSize:20.0];这种方式 看一下文档会发现这里的后边的字体的参数单位是point即pt 那么如果是UI设计师给我们的标注也是pt为单位的话直接设置就好(有一个基准,别的机型做相应的增量处理),如果是给我们的标注是px(像素)的话,我们该要怎么写呢 举个例子 比如说是iPhone6的机型(这里暗含所有的scale为2的机型),字体30px 那么设置字体的时候写多少合适呢? 见到网上给出了一个公式是px ÷ 96

CSS3的REM设置字体大小(转载)

出处:W3CPLUS 在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激烈的争论着,有人说PX做为单位好,有人说EM优点多,还有人在说百分比方便,以至于出现了CSS Font-Size: em vs. px vs. pt vs. percent这样的PK大局.不幸的是,仍然有不同的利弊,使各种技术都不太理想,但又无法不去用.真是进也难,退也难呀. 最近在学习em的相关知识的时候,无意之间让我拾得一宝,就是使用rem来设置Web页面的字体大小.让我一下子就来劲了,一口气看完并测试了一回

CSS3用rem,em,px设置字体大小

PX为单位 相对长度单位.像素px是相对于显示器屏幕分辨率而言的. 在Web页面初期制作中,我们都是使用“px”来设置我们的文本,因为他比较稳定和精确.但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的Web页面时,他改变了浏览器的字体大小,这时会使我们的Web页面布局被打破.这样对于那些关心自己网站可用性的用户来说,就是一个大问题了.因此,这时就提出了使用“em”来定义Web页面的字体. PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在

mac版pycharm pro 2019.1中文版如何设置字体大小

mac版pycharm pro 2019.1中文版如何设置字体大小?下面一起来看看吧,想要安装pycharm pro 2019 for mac 2019.1中文版,请点击这里.mac版pycharm pro 2019.1中文版如何设置字体大小首先进入设置页面,从File里面进入Settings进入Appearance & Behavior里面的Appearance ,这个是设置界面基本外观的.选中第二行的Override默认的size是12,可以调大一些,不同显示器点距不同,最合适的大小也不同.

jQuery实现设置字体大小代码实例

jQuery实现设置字体大小代码实例:设置网页中字体的大小是常见的操作,下面就通过代码实例介绍一下如何实现此功能.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落<