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.

score 1 · Answer 1 · answered Aug 29 '12 at 15:25

1

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

answered Aug 29 '12 at 15:25

Oli B

514
5
17

Yes, it is like that but it doubles the size of canvas to 200px x 200px on iOS Safari... – Coder12345 Aug 30 '12 at 17:25
I also noticed this happens if I just place an image without any JavaScript code. – Coder12345 Aug 30 '12 at 17:52

score 1 · Accepted Answer · answered Aug 30 '12 at 21:06

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.

Scene size with CraftyJS on iOS device

2 Answers2