webview中嵌入部份html5适配的小要领~

2019年8月30日 136次阅读 来源: D一生

假如在客户端嵌入全部的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;
《webview中嵌入部份html5适配的小要领~》
像图片中的如许，然则由于我的适配是提取{==$code=}代码中的类名,猎取宽度做适配，当父级display:none；子级的宽度是猎取不到的
mapWidth = document.querySelector('.partner_img_center').style.width;
H5中新增选择器querySelector这个是能猎取到的，直接适配，然后显现，这个就是我现在的处置惩罚计划；假如列位有更好的计划，请见教！
说明：这个要领在背景图片适配各个APP场景中，而且用zoom的要领做适配的时刻用到的，请注意运用场景，迎接列位指出不足，我会加以斧正~

    原文作者：D一生
    原文地址: https://segmentfault.com/a/1190000004005522
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞