移动设备上的全屏画布

Question

我创建了一个小型帆布游戏,我希望它能在PC和移动设备上运行.

在PC上,画布区域按预期工作,但在设计移动设备时出现问题.

有没有办法(CSS或javascript),以便当用户双击它时,网站内的画布区域将变为全屏？你不能玩游戏,除非画布足够大以适应整个屏幕,但我发现很难缩放,因此画布在移动设备上完全是全屏的.

换句话说,我想要一个CSS或javascript/jQuery解决方案全屏(在设备上设置缩放以完全适合画布区域)移动设备上的画布区域.

例

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

例如,尝试在iPhone上双击.iPhone Safari的默认操作是缩放〜尽可能多的画布,但它仍然不适合画布.现在我们应该忽略纵横比,但如果画布的纵横比与设备的屏幕不同,答案也会在顶部和底部添加一些空白的黑条:D

或者,换句话说:当用户双击时,我希望屏幕"锁定"画布,禁用平移或缩放,直到用户再次双击.

Answer 1

从:

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;"/>

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