Basic Crafty Game fills up entire screen on mobile devices

Question

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?

I removed the css (sorry, it was part of my debuggin). Anyway the css was set at 700x400 and the ipad is 1024x768 so that shouldn't fill the entire screen — Cyril Gaillard, Apr 29 '13 at 23:29

score 1 · Accepted Answer · answered May 04 '13 at 21:29

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

Rather than modifying the Crafty core JS, you can override the value before calling init. Set `Crafty.mobile = false` in your onload/domready handler. — howard10, Nov 24 '13 at 18:19

Basic Crafty Game fills up entire screen on mobile devices

1 Answers1