最近做了几个微信的活动页,总结一下遇到的问题。
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:appmessage
和 menu:share:timeline
这两个事件的回调函数不能执行,分享成功后需要手动点一下屏幕才会触发。
后来分别把他们的回调函数延迟 200ms 再执行,就一切正常了...
测试微信版本:6.0.1
全文完,觉得本文对你有帮助吗?
讨论(1)
回调函数为啥不执行呀