Question

我正在尝试使用Crafty.js做一些基本的游戏，它在桌面浏览器上运行得很好但在移动设备上填满了整个屏幕。这是我的网页：

<html>
<head>
  <title>Game</title>
  <script src="/javascripts/crafty.js" type="text/javascript">
  </script>
  <script src="/javascripts/homeGame.js" type="text/javascript">
</script>
</head>

<body style="margin:0 0">
  <div id="cr-stage"></div>
</body>
</html>

最后我的游戏（homegame.js）：

window.onload = function() {

    Game = {
  // Initialize and start our game
  start: function() {
    // Start crafty and set a background color so that we can see it's working
    Crafty.init(480, 320);
    Crafty.background('#2d3d4b');
  }
}

Game.start();

}

我尝试使用视口元标记，但这不起作用此外，crafty.js网站上的入门游戏在移动设备上也存在同样的问题： http://buildnewgames.com/assets/article//introduction-to-crafty/tut_bng/index.html

任何想法如何解决？

Answer 1

我发现了问题（或者它可能是一个功能）。在crafty.js的第4282行，它显示为：

* If Crafty.mobile is equal true Crafty does some things under hood:
    * ~~~
    * - set viewport on max device width and height
    * - set Crafty.stage.fullscreen on true
    * - hide window scrollbars
    * ~~~
    * 
    * @see Crafty.viewport
    */
    if (mobile) Crafty.mobile = mobile[0];

如果您对上面的行进行注释并将其替换为下面一行，则可以正常使用

if (mobile) Crafty.mobile = false;

我更愿意让用户决定是否要缩放。

干杯

基本Crafty游戏在移动设备上填满整个屏幕

1 个答案: