Question

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

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

对于桌面浏览器：canvas.width / height = window.innerWidth / Height
对于Android：相同，但我将（outerHeight - innerHeight）添加到画布高度，然后向下滚动，以补偿顶部栏。
对于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)" />

将画布设置为窗口外部宽度和高度而不是内部。这看起来很华丽;然而，一旦我旋转手机，它就会被拧紧，如果我将它旋转回肖像，它甚至会被更多拧紧。
令人惊讶的是，刷新并没有解决它，我需要将元视口中的“初始比例”更改为1，刷新，然后再返回0.5并再次刷新。

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

非常感谢！丹尼尔

Answer 1

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

如何在iPhone 4中以全分辨率获得全屏画布？

1 个答案: