移动端微信内置浏览器 x5内核 有哪些坑及解决方案？

Question

微信内置浏览器 x5内核 有哪些坑及解决方案？

Answer 1

问题太大了。。。

但，我还是要说一个我曾经碰到的坑。

微信x5内核的video标签。

在微信里面，他们把video标签及其内容用native的形式进行解析。而且，还脱离文档控制，脱离就算了，还不按css的实现来，直接把那个native的视频播放器做到那个webview的初始化位置，还模拟了一直随文档滚动而滚动。比如你定位为fixed，top为0，但它就是要随着页面的滚动而滚动。

同时只接受部分js控制，比如暂停啊啥的，其余的一些小功能，具体忘记是啥了，没做实现，或者说没做js和native的视频解析器做通信。

没解决办法，换方案。然后等微信升级。

半晚上想起来就是痛。

Answer 2

第一次做微信页面就发现两个巨坑，都出现在安卓版微信上面，iOS一切正常，安卓上面的QQ浏览器也是有问题，但是安卓上的chrome浏览器是没有问题的，所以估计是腾讯在安卓版上面埋下的坑。

1.安卓版微信不支持js的localeCompare函数，或者说支持的与别的浏览器有较大差异：
例如：

document.write("我".localeCompare("你"))//一般应该显示1，但是安卓微信显示4785

2.安卓版微信上面用jQuery或者zepto的append方法会出现莫名其妙的错误，可能不能正常插入，也可能导致上一句代码执行错误:

var dis = $("#distance").html();//数组["123","345","567"]
var sd=$(".shop-distance");//div组成的数组
for(var i=0;i<dis.length;i++){
    var ss=dis[i];
    // sd[i].append(ss);//会导致错误
    sd[i].innerHTML+=ss;//正常显示
}

Answer 3

你问一个满身是坑的破浏览器有那些坑？该怎么回答。

提前知道微信浏览器有那些坑是没有意义的，因为你会发现怎么都绕不过去。