我创建了一个小型画布游戏,希望它能够在 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;"/>
这已经确保画布以其原始分辨率渲染。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)