webview中嵌入部分html5适配的小方法~
如果在客户端嵌入整个的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的方法做适配的时候用到的,请注意应用场景,欢迎各位指出不足,我会加以指正~
原文地址:https://www.cnblogs.com/jlfw/p/12967029.html
- .NET中的异步编程上
- 从python2到python3
- 【干货】如何写代码 -编程内功心法
- .NET中的异步编程下
- 深度学习数学基础一--最小二乘法
- 【LeetCode 344】关关的刷题日记26 Reverse String
- 基于AOE网的关键路径的求解
- 【LeetCode 122】关关刷题日记25-Best Time to Buy and Sell Stock II
- 【干货】python正则表达式应用笔记
- .NET跨平台之旅:将示例站点从 ASP.NET 5 RC1 升级至 ASP.NET Core 1.0
- .NET跨平台之旅:在Linux上以本地机器码(native)运行ASP.NET Core站点
- 【干货】基于pytorch的CNN、LSTM神经网络模型调参小结
- jenkins配置.net mvc网站
- 简述【聚类算法】
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- PHP5.0 TIDY_PARSE_FILE缓冲区溢出漏洞的解决方案
- Python爬虫爬取新闻资讯案例详解
- Python代码需要缩进吗
- 解决Python paramiko 模块远程执行ssh 命令 nohup 不生效的问题
- Python计算信息熵实例
- 详解python logging日志传输
- 将tf.batch_matmul替换成tf.matmul的实现
- Python正则表达式高级使用方法汇总
- CentOS7.0下安装PHP5.6.30服务的教程详解
- Laravel Validator自定义错误返回提示消息并在前端展示
- 完美解决keras 读取多个hdf5文件进行训练的问题
- keras:model.compile损失函数的用法
- PHP获取当前系统时间的方法小结
- PHP结合jquery ajax实现上传多张图片,并限制图片大小操作示例
- php微信公众号开发之微信企业付款给个人