微信背景图片解决方案以及经验之谈

众所周知,微信浏览器的内核在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端会出现长河高过度膨胀的问题,导致图片完全变形。



这是常用的背景图片写法。可是在android的微信浏览器上对于页面过长的网页确会出现下部门空白的情况。
所以我加了js的判断,确保万无一失

$(document).ready(function(){
var height = $('body').css('height');
$("#bg-div").css('height', height);
});

同时微信浏览器最让人蛋疼的一点就是他对于缓存的处理,我们是很难进行有效的控制了。
为了方便调试,我会选择使用下面两个方法:
*通过meta来取消加载缓存。



*通过给css添加版本号来提示浏览器有修改内容。

最后application cache真的是一个很爽的东西,效果很牛掰,但是对于界面改版就会闹出很多问题了。使用起来需要谨慎点,另外对于在微信上用了这东西之后怎么取消。我也是没办法了。又没人支个招。
我的做法就是去掉 manifest属性,然后保留manifest文件,然后里面提示所有文件不加载。

你可能感兴趣的:(微信背景图片解决方案以及经验之谈)