移动设备上的全屏画布

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

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

有没有一种方法（CSS 或 javascript）可以让用户双击网站内的画布区域时变成全屏？除非画布足够大以适合整个屏幕，否则您无法玩游戏，但我发现很难缩放以使画布在移动设备上完全全屏。

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

Example http://jsfiddle.net/TM2ML/

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

例如，尝试在 iPhone 上双击。 iPhone Safari 上的默认操作是缩放到画布大小，但它仍然不能完美地适应画布。现在我们应该忽略宽高比，但是如果画布的宽高比与设备屏幕不同，那么在顶部和底部添加一些空白黑条的答案会很棒：D

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

From:

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

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

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

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

这已经确保画布以其原始分辨率渲染。