精华内容
下载资源
问答
  • 解决因为手机设置字体大小导致h5页面在webview中变形的BUG首先,我们做了一个H5页面,在各种手机浏览器中打开都没问题。我们采用了rem单位进行布局,通过JS来动态计算网页的视窗宽度,动态设置html的font-size,一切...

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

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

    这时候,你自信满满的将h5地址交给了APP工程师,做了一个WEBVIEW嵌套,然后就顺利交工了。

    测试组在一堆手机中测试APP,突然,在某个手机上打开,你的页面布局了乱了,字变大或者变小,总之很奇葩。

    你怀疑是APP的问题,但是客户端死活不承认。你在该手机浏览器中查看,确保没有一毛钱问题,也死活不承认是你的问题。于是测试人员对你俩不死不休的要求修改。于是,客户端给你加了调试工具后,你打开chrome进行调试,发现一个非常非常奇葩的问题:

    我明明设置的html字号是100px,为什么在APP中就变成了86(或者其他数字),你找遍所有的代码,都没有发现这个86是从哪里来的,你快疯了!!找了N多人帮忙,都没能解决这个问题!!我很希望能够告诉你,赶紧来看我这篇博文,因为,你现在经历的一切,我TM刚刚经历过~~

    好,你怎么也不会想到是手机设置字体大小造成的。因为默认浏览器中的内容是不受系统字体大小设置控制的,至少我遇到的几台手机都是这样的情况。但是APP不一样,APP是受那个玩意儿控制的!!

    问题描述清楚了,出现这个问题,有以下因素

    1. 你的页面采用了rem单位,并且是采用js动态计算htmlfont-size
    2. 你的页面被加在了APP中的webview
    3. 这该死的手机被重设了字体大小

    解决方法

    一般,我们动态计算好htmlfont-size之后,我们就啥都不干了,就走了。但是,我们现在知道了,我们设置的大小不一定是真实的大小,所以,我们需要在设置完字体大小之后,再去重新获取一下htmlfont-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";
        }
    }

    恶心的。。。不想再多言。。。

    祝好,不谢!

    2017年10月31日补充 安卓端设置 webview 解决此问题

    之前我用JS解决这个问题的方法虽然能够在一定程度上解决问题,但是还是很不优雅,也不方便。

    今天看到有网友给我留言,说在安卓端设置 webview 一个参数就能解决问题。原话如下:

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

    经过测试,确定,这个设置是能够完美解决问题的。

    所以,如果你现在看到这篇文章,尝试用我的代码来解决问题,更好的做法,是去找安卓客户端开发工程师,让他增加这样一个参数。

    如果不方便,再来用我的JS代码解决。

    PS:留言中有人说我的代码不能解决问题。我的代码肯定是能够解决问题的。但是需要根据你的项目自己去调整算法。我的默认设置是给 html 设置字体大小为 100px

    展开全文
  • <div class="markdown_views"><h1 id="解决因为手机设置字体大小导致h5页面在webview中变形的bug"><a name="t0" target="_blank"></a>解决因为手机设置字体大小导致h5页面在webview中变形的BUG 首先,我们做了一个H5...

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

    这时候,你自信满满的将h5地址交给了APP工程师,做了一个WEBVIEW嵌套,然后就顺利交工了。

    测试组在一堆手机中测试APP,突然,在某个手机上打开,你的页面布局了乱了,字变大或者变小,总之很奇葩。

    你怀疑是APP的问题,但是客户端死活不承认。你在该手机浏览器中查看,确保没有一毛钱问题,也死活不承认是你的问题。于是测试人员对你俩不死不休的要求修改。于是,客户端给你加了调试工具后,你打开chrome进行调试,发现一个非常非常奇葩的问题:

    我明明设置的html字号是100px,为什么在APP中就变成了86(或者其他数字),你找遍所有的代码,都没有发现这个86是从哪里来的,你快疯了!!找了N多人帮忙,都没能解决这个问题!!我很希望能够告诉你,赶紧来看我这篇博文,因为,你现在经历的一切,我TM刚刚经历过~~

    好,你怎么也不会想到是手机设置字体大小造成的。因为默认浏览器中的内容是不受系统字体大小设置控制的,至少我遇到的几台手机都是这样的情况。但是APP不一样,APP是受那个玩意儿控制的!!

    问题描述清楚了,出现这个问题,有以下因素

    1. 你的页面采用了rem单位,并且是采用js动态计算htmlfont-size
    2. 你的页面被加在了APP中的webview
    3. 这该死的手机被重设了字体大小

    解决方法

    一般,我们动态计算好htmlfont-size之后,我们就啥都不干了,就走了。但是,我们现在知道了,我们设置的大小不一定是真实的大小,所以,我们需要在设置完字体大小之后,再去重新获取一下htmlfont-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”; 
    
        } 
    
    }

    展开全文
  • 你的页面采用了rem单位,并且是采用js动态计算html的font-size你的页面被加在了APP中的webview中这该死的手机被重设了字体大小解决方法一般,我们动态计算好html的font-size之后,我们就啥都不干了,就走了。...

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

    你的页面采用了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

    展开全文
  • 解决因为手机设置字体大小导致h5页面在webview中变形的BUG首先,我们做了一个H5页面,在各种手机浏览器中打开都没问题。我们采用了rem单位进行布局,通过JS来动态计算网页的视窗宽度,动态设置html的font-size,一切...

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

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

    这时候,你自信满满的将h5地址交给了APP工程师,做了一个WEBVIEW嵌套,然后就顺利交工了。

    测试组在一堆手机中测试APP,突然,在某个手机上打开,你的页面布局了乱了,字变大或者变小,总之很奇葩。

    你怎么也不会想到是手机设置字体大小造成的。

    因为默认浏览器中的内容是不受系统字体大小设置控制的,至少我遇到的几台手机都是这样的情况。但是APP不一样,APP是受那个玩意儿控制的!!

    问题描述清楚了,出现这个问题,有以下因素

    > 1.你的页面采用了rem单位,并且是采用js动态计算html的font-size

    > 2.你的页面被加在了APP中的webview中

    > 3.这该死的手机被重设了字体大小

    二、解决

    方案一:【h5解决】

    需要在设置完字体大小之后,再去重新获取一下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";

    }

    }

    方案二:【客户端解决】

    iOS

    在iPhone系统设置中的“更大字体”里调整字号后,各个应用里中Webview里的文字大小似乎没有受到影响。但是对于诸如微信、UC浏览器等可以在APP里设置网页字体大小的应用,还是有限制调整字号的需求的。它们调整字体大小是通过给body设置-webkit-text-size-adjust属性实现的,因此只要限制这个属性不被修改即可:

    body {

    -webkit-text-size-adjust: none !important;

    }

    Android

    如果是在自己开发的APP中,可以在客户端的WebView组件中设置字体默认的缩放比例,以避免手机系统的字体修改对页面字体及布局造成影响。

    WebSettings settings = webView.getSettings();

    settings.setTextZoom(100);

    展开全文
  • 开发微信公众号,调整微信自带字体大小后,出现webview变形,网上找到此答案,还没有验证过,先存着function htmlFontSize(){ var h =Math.max(document.documentElement.clientHeight, window.innerHeight || 0);...
  • 好,你怎么也不会想到是手机设置字体大小造成的。因为默认浏览器中的内容是不受系统字体大小设置控制的,至少我遇到的几台手机都是这样的情况。但是APP不一样,APP是受那个玩意儿控制的!! 问题描述清楚了,出现...
  • 华为手机设置字体大小的方法 打开(设置) 打开(显示和亮度) 打开(字体与显示大小) 拖动调节字体大小和显示大小 字体/显示大小的默认标准不一定适合所有人,通过上面几个简单的步骤即可完成相应的自定义设置...
  • 动态计算好html的font-size之后,我们设置的大小不一定是真实的大小,所以,我们需要在设置完字体大小之后,...tag:解决因为手机设置字体大小导致h5页面在webview中变形的BUG。1、你的页面采用了rem单位,并且是采...
  • html在手机浏览器如何设置字体大小

    千次阅读 2019-05-22 09:42:08
    动态计算好html的font-size之后,我们设置的大小不一定是真实的大小,所以,我们需要在设置完字体大小之后,再去重新获取一下html的font-size... tag:解决因为手机设置字体大小导致h5页面在webview中变形的BUG。 ...
  • 首先,我们登录手机的“设置”。2.接着,我们下滑页面,点击“显示”。3.这时,我们再点击“字体大小”。4. 现在,我们可以看到小米的默认字体。5.随后,我们可以在标准文字页面下方点击选择字号大小。6.圆点向右...
  • 安卓的webview会出现这个问题,因为webview是手机内置浏览器的sdk封装出来的组件,因此会受手机系统的影响,但是ios的webview不会出现这个问题。 解决方法: 1、同时经过测试发现我们用document.documentElement....
  • 设置H5页面中字体大小不跟随手机系统 WebSettings webSettings = webView.getSettings(); webSettings.setTextZoom(100); 设置原生APP字体不跟随系统字体而变化 在acvitity的父类中重写getResource方法 @...
  • 安卓手机系统设置字体大小后与APP以及web端字体大小问题最近在做一些有关html和App的一些混合式开发,在测试过程中发现,android手机系统设置了字体大小,app应用中和web服务端的页面(也就是html界面)字体都会有...
  • 1 ios系统: body{ -webkit-text-size-adjust: 100% !important; } 安卓系统: 复制代码 (function() { if (typeof WeixinJSBridge == “object” &... typeof WeixinJSBridge.invoke == “function”) { ...
  • //设置字体为默认大小,不随系统字体大小改而改变 @Override public void onConfigurationChanged(Configuration newConfig) { if (newConfig.fontScale != 1)//非默认值 getResources(); ...
  • 只要给Text还是TextInput属性加上共同的属性allowFontScaling默认为true就行了,但是每一个设置很麻烦,就在全局统一设置下 项目根文件index.js 哎太简单了吧,喜欢点个赞,不喜勿喷,谢谢! ...
  • h5手机端适配字体设置

    千次阅读 2019-09-18 14:09:27
    手机端页面动态设置根元素,适配不同屏幕大小。 开始 <script> //rem为html的字体大小 通过改变html的字体大小达到适配的效果 remChange(); //监听屏幕改变resize事件 触发remChange方法 window....
  • 我在设置的时候,试了设置百分比,还有设置像素, 两者都不行,是什么原因,有什么解决办法

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,427
精华内容 570
关键字:

手机设置字体