javascript - 如何在 iPhone 4 中拥有全分辨率的全屏 Canvas ？

Question

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

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

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

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

<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)" />

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

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

非常感谢!
丹尼尔

Answer 1

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