javascript - 移动设备上的全屏 Canvas

Question

我创建了一个小型 Canvas 游戏，我希望它能在 PC 和移动设备上运行。

在 PC 上， Canvas 区域按预期工作，但在为移动设备设计时会出现问题。

有没有办法(CSS 或 javascript)让网站内的 Canvas 区域在用户双击时变成全屏？除非 Canvas 足够大以适合整个屏幕，否则您无法玩游戏，但我发现很难缩放以使 Canvas 在移动设备上完全显示为全屏。

换句话说，我想要一个 CSS 或 javascript/jQuery 解决方案来全屏显示(在设备上设置缩放以完美适合 Canvas 区域)移动设备上的 Canvas 区域。

Example

canvas{
    width:624;
    height:351;
    background:red;
}

例如，尝试在 iPhone 上双击。 iPhone 的 Safari 上的默认操作是缩放到 Canvas 一样多，但它仍然不能完全适合 Canvas 。现在我们应该忽略纵横比，但是如果 Canvas 的纵横比与设备屏幕的纵横比不同，那么在顶部和底部也会添加一些空白的黑色 strip 的答案会很棒 :D

或者，换句话说:当用户双击时，我希望屏幕“锁定” Canvas ，禁用平移或缩放，直到用户再次双击。

Answer 1

来自:

http://impactjs.com/documentation/impact-on-mobile-platforms#always-render-in-the-native-resolution

如果您的 Canvas 上的一个像素不直接对应于设备屏幕的一个像素，则整个 Canvas 必须在显示之前由浏览器缩放 – 这非常慢。

大多数移动浏览器都支持视口(viewport)元标记。使用此标记，您可以将页面的缩放级别锁定为 1，即不缩放。

<meta name="viewport" content="width=device-width; 
    initial-scale=1; maximum-scale=1; user-scalable=0;"/>

这已经确保 Canvas 以其原始分辨率呈现。