如何在 iPhone 4 中拥有全分辨率的全屏画布？
我正在尝试创建一款 HTML5 游戏，我希望能够在现代桌面浏览器以及尽可能多的智能手机上运行。目前，这意味着 iPhone 3/4 和一些 Android 设备...
这个游戏基本上是一个应该占据整个屏幕的画布，我手动调整其大小（处理 onResize 事件），如下所示：（这是我发现的通过反复试验，效果最好，如果您有任何提示，我很想听听它们！）
- 对于桌面浏览器：canvas.width/height = window.innerWidth / Height
- 对于Android：相同，但我添加了（outerHeight - insideHeight ) 到画布高度，然后我向下滚动，以补偿顶部栏。
- 对于 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 设置运行完美，但它以低分辨率显示，看起来很糟糕。我无法成功地使其以完整的视网膜分辨率显示，而无需滚动和（这是关键）响应手机的旋转。
我得到的最接近的是设置
<meta name="viewport" content="width=640, initial-scale=0.5 (etc)" />
并将画布设置为窗口外部宽度和高度，而不是内部。最初看起来很漂亮；然而，一旦我旋转手机，它就会变得一团糟，如果我将它旋转回纵向，它甚至会变得更加糟糕。
令人惊讶的是，刷新并不能解决这个问题，我需要将元视口中的“初始比例”更改为 1，刷新，然后返回到 0.5 并再次刷新。
有什么办法可以做我想做的事吗？
非常感谢！
丹尼尔
I'm trying to create an HTML5 game, which I'd like to work in modern desktop browsers, plus as many smartphones as I can get my hands on to. For now, that means iPhone 3/4 and a couple of Androids...
This game is basically a canvas that should occupy the whole screen, which I manually resize (handling the onResize event) as follows: (this is what I found to work best, by trial and error, if you have any tips, i'd love to hear them!)
- For desktop browsers: canvas.width/height = window.innerWidth / Height
- For Android: same, but I add (outerHeight - innerHeight) to the canvas height, and I scroll down, to compensate for the top bar.
- For iPhone 3: same as for Android, but I add a hard-coded 60px instead.
In all cases I have these meta-tags:
<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" />
Now my big problem is iPhone 4...
The iPhone 3 setting I mentioned above works perfectly, but it displays in low-res and looks like crap. I haven't been able to successfully make it show in full Retina resolution, without scrolling and (this is key) responding to the rotation of the phone.
The closest I got was setting
<meta name="viewport" content="width=640, initial-scale=0.5 (etc)" />
And setting the canvas to the window outer width and height instead of the inner. This looks gorgeous initially; however, once I rotate the phone, it gets all screwed up, and if I rotate it back to portrait, it's even more screwed up.
Surprisingly, refreshing doesn't fix it, I need to change the "initial-scale" in the meta viewport to 1, refresh, and then back to 0.5 and refresh again.
Is there any way to do what I'm trying to do?
Thank you very much!
Daniel
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您可以尝试保持initial-scale = 1，然后将canvas.width和canvas.height设置为您确定的适当尺寸的两倍，并使用CSS将CSS宽度和CSS高度设置为正确的尺寸。这应该会给你一个更高分辨率的画布。 canvas.height 和 canvas.width 属性设置画布中的实际像素数，而 CSS 高度和宽度只是将画布拉伸（或在本例中压缩）到特定大小。
You can try keeping the initial-scale=1, then set the canvas.width and canvas.height to be double the appropriate dimensions you've determined, and use CSS to set the CSS width and CSS height to be the correct size. This should give you a higher resolution canvas. The canvas.height and canvas.width properties set the actual number of pixels in the canvas, while the CSS height and width simply stretch (or in this case, compress) the canvas to a particular size.