webview中嵌入部分html5适配的小方法~
2021-02-16 19:19
如果在客户端嵌入整个的html5一般来说是没有问题的,但是如果是某一段的html5嵌入到webview中,并且是后台传来的数据结构并且是PHP渲染,图片是背景图片,要适配手机app(适配方法是用css3的zoom属性适配,zoom=body宽度/获取背景图片的宽度(这个是后台传值的时候就有的)) 是会有想想不到的bug的,想要全屏展示,有部分两边留白的情况,下面一大块留白,这些问题都不会再iphone中显示出来的,只有万能的安卓才会有这么奇葩的问题,所以作为程序员就要找原因,解决问题
首先针对两边留白的问题,你可以用各种代码尝试看看body的宽度
var windowWidth = $(‘body‘).width();
var windowWidth = $(window).width();
var windowWidth = document.documentElement && document.documentElement.clientWidth || document.body.clientWidth || window.innerWidth;
这三行代码都尝试过,可以打印在页面中(在webview中调试要打印在页面中,因为alert,和console.log这样的语句APP阻止);打印出来之后,你会发现这三个的值是一样的,也就是说JS获取body的宽度貌似在webview中不确定,
既然JS解决不了,那就让安卓传来客户端的宽度吧(他们叫db,记住他们以为的px和咱们常说的px是不一样的,所以直接问他们要dp);只有安卓上才要、传值哦,记住不是直接传给JS而是传给PHP
其次解决下面留白的问题(这个问题也是只有安卓有问题,iphone没有问题)
下面留白我分析是因为结构加载进来了,所以导致body撑开了之后适配完成body收不回去了,webview也收缩不回去了(这个问题也是只有安卓有问题,iphone没有问题)
唯一的办法就是修改渲染机制;
方案一(图片加载完成之后,适配,但是这个方法并不好用)
代码如下
win.t_img; // 定时器
win.isLoad = true; // 控制变量
win.isImgLoad(function(){
$(‘.content‘).html($(‘textarea#bodyContent‘).val());
$(‘.hot-outer‘).each(function(){
win.set_hot("#"+this.id);
});
win.change_schema();
});
function isImgLoad (callback){
// 查找所有封面图,迭代处理
$(‘img‘).each(function(){
// 找到为0就将isLoad设为false,并退出each
if(this.height === 0){
win.isLoad = false;
return false;
}
});
// 为true,没有发现为0的。加载完毕
if(win.isLoad){
clearTimeout(win.t_img); // 清除定时器
// 回调函数
callback();
// 为false,因为找到了没有加载完成的图,将调用定时器递归
}else{
win.isLoad = true;
win.t_img = setTimeout(function(){
win.isImgLoad(callback); // 递归扫描
},500); // 我这里设置的是500毫秒就扫描一次,可以自己调整
}
}
这段代码会使底部留白出现的频率降低,但是会影响iphone的加载,比如,图片出来了一点点,下面被原生的遮住了,所以就想了另外一个方案
**方案二:
结构加载的时候要隐藏结构,适配完成之后再显示出来**
直接正常加载,但是加载的时候要display:none;
像图片中的这样,但是因为我的适配是提取{==$code=}代码中的类名,获取宽度做适配,当父级display:none;子级的宽度是获取不到的mapWidth = document.querySelector(‘.partner_img_center‘).style.width;
H5中新增选择器querySelector这个是能获取到的,直接适配,然后显示,这个就是我目前的解决方案;如果各位有更好的方案,请赐教!
注明:这个方法在背景图片适配各个APP场景中,并且用zoom的方法做适配的时候用到的,请注意应用场景,欢迎各位指出不足,我会加以指正~
文章标题:webview中嵌入部分html5适配的小方法~
文章链接:http://soscw.com/index.php/essay/56234.html