我正在尝试创建一个HTML5游戏，希望能在现代桌面浏览器以及尽可能多的智能手机上运行。目前，这意味着iPhone 3/4和一些Android手机......
将画布设置为窗口的外部宽度和高度，而不是内部的。这看起来一开始很漂亮；然而，一旦我旋转手机，它就会变得非常混乱，如果我将其旋转回纵向，则更加混乱。
令人惊讶的是，刷新并不能解决这个问题，我需要在 meta viewport 中将 "initial-scale" 更改为 1，刷新，然后再将其更改为 0.5 并刷新。
有没有办法实现我想要的效果呢？
非常感谢！ Daniel
这个游戏基本上是一个画布，应该占据整个屏幕，我手动调整大小（处理onResize事件），如下所示：（这是我通过试错发现的最佳方法，如果您有任何建议，我很乐意听取！）
- 对于桌面浏览器：canvas.width/height = window.innerWidth / Height
- 对于Android：同样的方式，但我将(outerHeight - innerHeight)添加到画布高度，并向下滚动，以补偿顶部栏。
- 对于iPhone 3：与Android相同，但我加了一个硬编码的60px。
在所有情况下，我都有这些meta标签：
<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)" />
将画布设置为窗口的外部宽度和高度，而不是内部的。这看起来一开始很漂亮；然而，一旦我旋转手机，它就会变得非常混乱，如果我将其旋转回纵向，则更加混乱。
令人惊讶的是，刷新并不能解决这个问题，我需要在 meta viewport 中将 "initial-scale" 更改为 1，刷新，然后再将其更改为 0.5 并刷新。
有没有办法实现我想要的效果呢？
非常感谢！ Daniel