最近做了几个微信的活动页,总结一下遇到的问题。

1.首先遇到的是,各种小米的机型,window.innerHeight 获取到的不是 css pixel, 居然是 device pixel…

css pixel(css 像素), 指的是 css 样式代码中使用的逻辑像素,比如定义 body 的宽度为 320px. device pixel(设备像素), 指的是设备的像素,比如 iPhone 的分辨率为 640×1136px

那么这个 css pixel 和 device pixel 有什么关系呢?这就需要先了解 device pixel ratio(设备像素比)了,解了它以后,咱们知道了 css 中 1px 并不一定等于设备的 1px, 是要根据这个 device pixel ratio 来计算得出的。

所以,咱们常用的设计稿宽度一般是 640px, 而我们在写页面的时候,一般把宽度定义为 320px. 这是因为大多数机型的像素比都是 2:1

我们要获取的是 css 像素,获取个设备像素有什么用啊?后来发现,将 window.innerHeight 放到微信自带的 WeixinJSBridgeReady 事件的回调中,就能正常获取到 css 像素了:

document.addEventListener('WeixinJSBridgeReady', function(){
    var height = window.innerHeight;
}, false);

这东西是不是让你想到了 document 的 ready 事件?在人屋檐下,不得不低头啊…

2.微信提供的分享给好友和分享到朋友圈接口的 bug, 试了几个魅族2, 均发现 menu:share:appmessagemenu:share:timeline 这两个事件的回调函数不能执行,分享成功后需要手动点一下屏幕才会触发。

后来分别把他们的回调函数延迟 200ms 再执行,就一切正常了…

测试微信版本:6.0.1