Scene size with CraftyJS on iOS device

Question

I'm trying to make a CraftyJS scene size 100x100 pixels to display exactly as 100x100 pixels in mobile Safari on iOS.

The code is essentially this:

function init() {
// Start crafty     
Crafty.init(100, 100);
Crafty.canvas.init();
Crafty.background('#eeeeee');
Crafty.e('2D, Canvas, Color').attr({x: 0, y: 0, w: 10, h: 10}).Color('black');
}

On desktop it works fine. On mobile Safari it resizes to some different size. I tried to fiddle with viewport metatag but it seems like Crafty has its own settings. Any help or pointer to right direction appreciated.

Answer 1

I believe I found the cause - Safari on retina displays (high DPI) is interpreting each CSS pixel as 2 logical pixels therefore doubling the size of the image. There is webkit setting that can alter this something like:

<link rel="stylesheet" type="text/css" href="/css/retina.css" media="only screen and (-webkit-min-device-pixel-ratio: 2)" />

As for Crafty itself, I probably need to fiddle with its viewport settings and set initial scale to 0.5 instead of 1.0 on retina display to fix this issue.

Answer 2

The JS code looks fine, your viewport settings should be as follows to ensure the device doesn't attempt to scale the page to fit:

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">