标签：javascript css canvas mobile-devices
我创建了一个小型帆布游戏,我希望它能在PC和移动设备上运行.
在PC上,画布区域按预期工作,但在设计移动设备时会出现问题.
有没有办法(CSS或javascript),以便当用户双击它时,网站内的画布区域将变为全屏？你不能玩游戏,除非画布足够大以适应整个屏幕,但我发现很难缩放,因此画布在移动设备上完全是全屏的.
换句话说,我想要一个CSS或javascript / jQuery解决方案全屏(在设备上设置缩放以完全适合画布区域)移动设备上的画布区域.
canvas{
width:624;
height:351;
background:red;
}
例如,尝试在iPhone上双击. iPhone Safari的默认操作是缩放〜尽可能多的画布,但它仍然不适合画布.现在我们应该忽略纵横比,但如果画布的纵横比与设备的屏幕不同,答案也会在顶部和底部添加一些空白的黑条：D
或者,换句话说：当用户双击时,我希望屏幕“锁定”画布,禁用平移或缩放,直到用户再次双击.
解决方法:
从：
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以其原始分辨率呈现.
标签：javascript,css,canvas,mobile-devices 来源： https://codeday.me/bug/20190718/1494448.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。