webview中嵌入部分html5适配的小方法~

DataPipeline 发布于2019-08-21 10:47 / 481人阅读

摘要：如果在客户端嵌入整个的一般来说是没有问题的，但是如果是某一段的嵌入到中，并且是后台传来的数据结构并且是渲染，图片是背景图片，要适配手机适配方法是用的属性适配，宽度获取背景图片的宽度这个是后台传值的时候就有的是会有想想不到的的，想要全屏展示，

如果在客户端嵌入整个的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的方法做适配的时候用到的，请注意应用场景，欢迎各位指出不足，我会加以指正~

idc机房托管混合云方法是对象的一部分 webrtc在webview中使用问题 ios中webview加载html js中获取字符串部分

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86203.html

webview中嵌入部分html5适配的小方法~

摘要：如果在客户端嵌入整个的一般来说是没有问题的，但是如果是某一段的嵌入到中，并且是后台传来的数据结构并且是渲染，图片是背景图片，要适配手机适配方法是用的属性适配，宽度获取背景图片的宽度这个是后台传值的时候就有的是会有想想不到的的，想要全屏展示，如果在客户端嵌入整个的html5一般来说是没有问题的，但是如果是某一段的html5嵌入到webview中，并且是后台传来的数据结构并且是PHP渲染...

LdhAndroid 2019-08-30 12:43 评论0 收藏0
webview中嵌入部分html5适配的小方法~

摘要：如果在客户端嵌入整个的一般来说是没有问题的，但是如果是某一段的嵌入到中，并且是后台传来的数据结构并且是渲染，图片是背景图片，要适配手机适配方法是用的属性适配，宽度获取背景图片的宽度这个是后台传值的时候就有的是会有想想不到的的，想要全屏展示，如果在客户端嵌入整个的html5一般来说是没有问题的，但是如果是某一段的html5嵌入到webview中，并且是后台传来的数据结构并且是PHP渲染...

SwordFly 2019-08-02 18:22 评论0 收藏0
WKWebView微信适配

摘要：背景是微信将要从切换成，前端的页面需要进行适配。以往在做滚动加载的组件时，微信内的翻页的时候老是要等待下一页加载，现在终于不用等了。当然也有坑，具体微信内要怎么兼容看文档。微信在，已经开始灰度了，后续版本会全量。 WKWebView 背景是微信webview将要从UIWebView切换成WKWebView，前端的web页面需要进行适配。什么是WKWebView 官方的解释：WKWeb...

olle 2019-08-20 14:43 评论0 收藏0
也谈多终端屏幕适配

摘要：当在感叹终于不需要兼容端低端浏览器时却面临了移动多终端屏幕适配这一问题。适配的原因相比也不用多说了就是为了使网站各终端的用户都不流失。写在前面在移动网民规模不断扩大的今天，手机、平板等移动设备俨然已成了网民主要上网终端。迎着这个势头，我们这些前端汪们也接下了不少的移动web页面开发需求。当在感叹终于不需要兼容pc端低端浏览器时却面临了移动多终端屏幕适配这一问题。本人经验尚浅，在大...

longmon 2019-08-05 17:47 评论0 收藏0
HTML5 活动宣传页「My Flyme 独家记忆」开发实践总结

摘要：年前放假的最后一天，我们上线了独家记忆活动宣传页。微信分享主要代码参考独家记忆当时光凝固，当回忆定格。这是属于我和的独家记忆。年前放假的最后一天，我们上线了「My Flyme 独家记忆」 H5 活动宣传页。因种种原因，直到放假前几天，才突然要求我们参与并开始项目的前端部分。此时大概的情况是：所有数据已计算完毕；后端接口已完成待联调；交互视觉只出了不到四分之一(一共二十多个页面)；我...

Anonymous1 2019-08-20 14:13 评论0 收藏0