jquery mobile使用过程中遇到的一些问题及解决方法

最近的项目在综合考虑了可能维护性和应用本身的复杂性，采用了HTML5 + JQuery Mobile的文案。

记录一下遇到的两个问题。

１）为了在手机上运行的更快，canvas中底图决定调用 putImageData 来复制，但在android 2.3系统上，canvas 的 putImageData 有很严重的锯齿，canvas.translate(0.5, 0.5)也是没有效果。如下图，前面是正常画出的底图，后面是 putImageData 后的底图。



解决办法，

if (android 2.3) {

一个一个图去重画画图

} else {

canvas.putImageData

}

２）app设计为向右滑出菜单panel，这次在 WP8 上出问题了，在一个很大的page上滑出的菜单panel是空白的，在一些比较小的page上是正常的。下图是不正常的，



花了一天调度了一下jqm的代码，却没有发现什么可疑的地方。晚上突然来了灵感，把菜单panel的css重置一下，然后它就正常了，正常的是如下图，



这里用到了setTimeout延时一小会才重置，红圈中的代码是我给jqm打的一个小patch



３）双点页面时，page的header会跳动几个像素，产生的原因是因为双点页面是jqm会触发页面上的 vclick 事件，

解决方法时，我不需要用到这些代码，把jqm中对应这段的代码给注释了。

listview 组合 collapsible时，collapsible不显示，问题发生在android 2.3平台上，没有能够调试js的调度器，只能用有通过打印的方式去调试了。能过aler正常与不正常的dom结构发现，在android 2.3平台上生成的dom结构不全。











观察发现了生成的dom中的class特征，通过搜索 ui-collapsible-heading-toggle，因为只搜索到一处，一定是它了，马上就定位到了代码中的关键地方，只插入一条alert就可以发现到问题了。

解决方法：

把<legend>改为<h3>，在所有的平台都正常了。

listview 组合 collapsible 正常的样子如下，