众所周知，微信浏览器的内核在android下时qq浏览器的x5内核，在ios下是系统的safari浏览器。总结，x5内核各种坑，而且填坑的速度远远及不上挖坑的速度。
html { height: 100%; }
body {
height: 100%;
font-family: "Microsoft YaHei";
color: rgba(255, 255, 255, 0.8);
background-image: url('../../img/bg_3.16.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
background-attachment: fixed;
}
这个是最原始的方案，在android端会出现长河高过度膨胀的问题，导致图片完全变形。
<div style="position:absolute; width:100%; height:100%; z-index:-1">
<img src="ROOT/Public/Sale/img/bg_3.16.jpg" height="100%" width="100%"/>
</div>
这是常用的背景图片写法。可是在android的微信浏览器上对于页面过长的网页确会出现下部门空白的情况。
所以我加了js的判断，确保万无一失
$(document).ready(function(){
var height = $('body').css('height');
$("#bg-div").css('height', height);
});
同时微信浏览器最让人蛋疼的一点就是他对于缓存的处理，我们是很难进行有效的控制了。
为了方便调试，我会选择使用下面两个方法：
*通过meta来取消加载缓存。
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
*通过给css添加版本号来提示浏览器有修改内容。
<link rel="stylesheet" href="index.css?123">
最后application cache真的是一个很爽的东西，效果很牛掰，但是对于界面改版就会闹出很多问题了。使用起来需要谨慎点，另外对于在微信上用了这东西之后怎么取消。我也是没办法了。又没人支个招。
我的做法就是去掉 manifest属性，然后保留manifest文件，然后里面提示所有文件不加载。
网友评论