HTML5画布-视网膜上纵向和横向显示的性能差异

我们正在使用缩放技术来提高视网膜显示器上画布web应用程序的分辨率。基本上，这里描述的技术是：

但是，我们注意到，在横向模式和纵向模式下运行时，性能存在显著差异。我已经建立了一个JSFIDLE测试应用程序来演示这一点。如果查看嵌入式版本，您会注意到差异：

（删除/embedded/result/将带您进入原始页面。我只能拥有一篇包含2个链接的帖子）

如果在iPad3上查看时在纵向和横向之间切换（需要在切换之间刷新浏览器窗口），则可以看到纵向模式比横向模式更为复杂。在我自己的Web服务器上运行（而不是通过JSFIDLE）时，结果要明显得多

我试着做了一些帧速率指标，但它们只是测量我们进行draw调用的次数，而不是浏览器实际更新的次数

有人对此有什么见解吗？这是硬件相关问题吗？理论上，我们在做相同的绘制调用，填充相同数量的像素，对吗

---

-克里斯

我也遇到了风景画与肖像画的同样问题。这也发生在iPhone4、4s和5上——只要涉及视网膜和双密度画布。我唯一能做的就是在苹果解决这个问题之前，不要使用双密度技术

---

但是，如果您决定使用视网膜，您可以检测设备的方向，并仅在横向中调整画布的两倍密度…

我也遇到了横向与纵向的相同问题。这也发生在iPhone4、4s和5上——只要涉及视网膜和双密度画布。我唯一能做的就是在苹果解决这个问题之前，不要使用双密度技术

---

但是，如果您决定使用视网膜，您可以检测设备的方向，并仅在横向调整画布的双密度大小…

似乎一个可行的解决方案是将画布宽度限制为1023，以便双密度画布的宽度为2046 px；Arima发现并解释如下：

---

一个可行的解决方案似乎是将画布宽度限制为1023，这样双密度画布的宽度为2046像素；Arima发现并解释如下：