Search code examples
javascriptcraftyjs

Basic Crafty Game fills up entire screen on mobile devices

I am trying out Crafty.js to do some basic games and it works perfectly on desktop browsers but fills up the entire screen on mobile devices. Here my webpage: 

<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>

and finally my game (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();

}

I tried using the viewport meta tag but that didn't work Also the getting started game on the crafty.js website has the same problem on mobile devices: http://buildnewgames.com/assets/article//introduction-to-crafty/tut_bng/index.html.

Any ideas how to fix it?

Solution

  • I found the problem (or it might be a feature). On line 4282 of crafty.js, it reads:

    * 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 you comment the line above and replace it with the one below, it works

    if (mobile) Crafty.mobile = false;

    I just prefer to let the user decide if he wants to zoom or not.

    Cheers