HTML5 Canvas - 视网膜显示屏上的纵向和横向之间的性能差异

时间:2012-07-25 13:51:59

标签: html5 web-applications canvas retina-display ipad-3

我们正在使用缩放技术来提高视网膜显示屏上画布网络应用的分辨率。基本上,这里描述的技术:

http://zsprawl.com/iOS/2012/03/html5-canvas-and-retina-displays/

但是,我们注意到在横向模式和纵向模式下运行时性能差异很大。我已经设置了一个jsFiddle测试应用来证明这一点。如果您查看嵌入版本,可以注意到区别:

http://jsfiddle.net/SaJ69/embedded/result/

(删除/ embedded / result /将带你到原来的小提琴。我只能有一个帖子中有2个链接)

如果您在iPad3上观看时在纵向和横向之间切换(您需要在开关之间刷新浏览器窗口),您可以看到纵向模式比横向更加笨重。在我自己的网络服务器上运行它(而不是通过jsFiddle)时,结果更加明显。

我尝试了一些帧速率指标,但它们只是衡量我们进行绘制调用的次数,而不是浏览器实际更新的次数。

任何人都对此有任何见解?这是硬件相关的问题吗?理论上我们做同样的绘制调用并填充相同数量的像素吗?

-Chris

2 个答案:

答案 0 :(得分:0)

似乎有一个工作方法是将画布宽度限制在1023,这样双倍密度画布的宽度为2046像素;由Arima&发现在这里解释: http://www.scirra.com/forum/retina-ios-performance-problem-fix-please-test_topic58742.html

答案 1 :(得分:-1)

我也遇到了与横向和肖像相同的问题。这也发生在iPhone 4,4s和5 - Anywhere Retina和双密度画布上。我唯一的工作就是在Apple解决问题之前不要使用双密度技巧。

但是,如果您决定使用Retina,您可以检测设备的方向并仅在横向上调整画布的双倍密度......