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

解决因为手机设置字体大小导致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);

android webview 字体被放大,解决因为手机设置字体大小导致h5页面在webview中变形的BUG...相关推荐

h5 android 字体设置,解决因为手机设置字体大小导致h5页面在webview中变形的BUG
解决因为手机设置字体大小导致h5页面在webview中变形的BUG 首先,我们做了一个H5页面,在各种手机浏览器中打开都没问题.我们采用了rem单位进行布局,通过JS来动态计算网页的视窗宽度,动态设置 ...
安卓手机键盘弹出导致h5页面错乱
安卓手机键盘弹出导致h5页面错乱特别是有表单的h5,点击input输入信息的时候提交的按钮.以及定位到下方的图片都会被挤上来. 解决方法如下: <div class="bg_img& ...
android 横屏字体变小,网页自适应解决iPhone手机横屏字体变大问题
先森在完成网站自适应的过程中,遇到了很多大大小小的问题,其中一个问题就是横屏字体变大的问题.这个问题一碰到感觉很麻烦,其实解决方法却很简单. 网页自适应解决iPhone手机横屏字体变大问题网上搜索结 ...
Android进阶之路 - 解决部分手机拍照之后图片被旋转的问题
这几天犯了一个错误,初期想着甩锅给后台的- 但还好及时发现了是自身的问题~ 关联文章 Android基础进阶 - 调用拍照.获取图片(基础) Android基础进阶 - 获取.调用相册内图片(基础) ...
h5页面在微信中打开，字体显示不正常
h5页面在微信中打开,页面打开时字体正常显示,加载完成字体变大或者变小(其他浏览器均正常显示). 原因是调整了微信中页面字体大小,如下图所示: 如果不想在微信中打开的H5页面字体变大或者变小而影响整体 ...
手机QQ访问时，html页面在QQ中自定义预览和自定义分享
手机QQ访问时,html页面在QQ中自定义预览和自定义分享有一天,产品说要做个自定义预览和分享功能,于是很快在微信上实现了,可是不知道在QQ上怎么实现,查看了很多网站,最后才找到了解决方案,于是想和 ...
android平板怎么换字体大小,安卓手机设置字体大小全部教程
安卓手机在这一两年内发展迅猛,如今玩手机越来越多.关于手机设置方面的问题一直困扰着大家,尤其是字体大小设置.玩过手机的都知道,安卓手机隐藏了很多的功能设置,现在就来解密设置字体大小吧! 工具/原料方 ...
Android 头像替换，解决华为手机取不到图片
只用涉及到用户模块的App基本上就会用到头像替换的功能,类似的代码也是信手沾来,百度.GitHub以及各大论坛好博客一大把,随便粘过来就可以用了.但是...有坑.在华为荣耀手机上踩坑了,网上看了下问的 ...
vivo手机android耗电快怎么解决,vivo手机耗电严重怎么办如何解决手机耗电严重的问题...
相信大家对vivo手机都是不陌生的,他也是我们国产智能手机中的一个品牌,使用的用户也非常的多,并且机型也是一代比一代更好,那么大家平时在使用vivo手机的时候可能都会觉得它的电耗太快了,每天没用多久就 ...
android gridview 设置字体,我想为GridView设置字体
我想为GridView的适配器TextView设置字体.我需要从资源文件夹访问字体.我想为GridView设置字体 TextView listitem = (TextView) findViewByI ...

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

android webview 字体被放大,解决因为手机设置字体大小导致h5页面在webview中变形的BUG...相关推荐

最新文章

热门文章