I’m trying to make a CraftyJS scene size 100×100 pixels to display exactly as 100×100 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.
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:
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.