如何在 iPhone 4 中拥有全分辨率的全屏画布？

Question

我正在尝试创建一个 HTML5 游戏，我想在现代桌面浏览器以及尽可能多的智能手机上运行它。目前，这意味着 iPhone 3/4 和几个 Android...

这个游戏基本上是一个应该占据整个屏幕的画布，我手动调整它的大小（处理 onResize 事件）如下：（这是我发现最好的，通过反复试验，如果你有任何提示，我很想听听他们的声音！）

• 对于桌面浏览器：canvas.width/height = window.innerWidth / Height
• 对于 Android：相同，但我将 (outerHeight - innerHeight) 添加到画布高度，然后向下滚动以补偿顶部栏。
• 对于 iPhone 3：与 Android 相同，但我添加了一个硬编码的 60 像素。

在所有情况下，我都有这些元标记：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, target-densitydpi=device-dpi" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

现在我的大问题是 iPhone 4... 我上面提到的 iPhone 3 设置完美运行，但它以低分辨率显示，看起来像垃圾。我无法成功使其以完整的 Retina 分辨率显示，无需滚动和（这是关键）响应手机的旋转。

我得到的最接近的是设置

<meta name="viewport" content="width=640, initial-scale=0.5 (etc)" />

并将画布设置为窗口外部的宽度和高度，而不是内部。最初看起来很漂亮；但是，一旦我旋转手机，它就会完全搞砸，如果我把它转回纵向，它甚至更多搞砸了。
令人惊讶的是，刷新并不能解决问题，我需要将元视口中的“初始比例”更改为 1，刷新，然后再回到 0.5 并再次刷新。

有什么办法可以做我想做的事吗？

非常感谢！
丹尼尔

Answer 1

您可以尝试保持 initial-scale=1，然后将 canvas.width 和 canvas.height 设置为您确定的适当尺寸的两倍，并使用 CSS 将 CSS 宽度和 CSS 高度设置为正确尺寸。这应该为您提供更高分辨率的画布。 canvas.height 和 canvas.width 属性设置画布中的实际像素数，而 CSS 高度和宽度只是将画布拉伸（或在本例中，压缩）到特定大小。