Forums » Help » iPhone + mobile issues

I'm having trouble getting the scaling right on my iPhone for my game:
http://nickbriz.com/games/duckfeed.php

also, for some reason the iPhone-buttons appear over the canvas instead of beneath it like in biolab.

any ideas???

thanks.

here's my main.js file:
http://nickbriz.com/games/main.js

The buttons are positioned in the CSS of to be at bottom: 0px. Each button is 96px in height and since your viewport on iOS is 416px high (480 - status and navigation bar) that leaves you with 320px height for your game.

You start your game with 480 x 448 pixels (240x224 and a scaling of 2) - it simply doesn't fit on the iPhone's screen. So either you start it without scaling and make the canvas larger ( e.g.320x320 and a scale of 1), or you leave the scaling at 2 and make the canvas smaller: 160x160.

Also, try to add the following to the html,body { ... } definition in your CSS, to make sure that you use all the available height:
min-height: 416px;

Thanks dominic, that helped a lot.

here are the dimensions that seem to be working best for my game:

if( ig.ua.iPhone4 ) {
    // The iPhone 4 has more pixels - we'll scale the 
    // game up by a factor of 4
    ig.main('#canvas', MyGame, 30, 210, 220, 4);
}
else if( ig.ua.mobile ) {
    // All other mobile devices
    ig.main('#canvas', MyGame, 30, 210, 220, 1.5);
}
else {
    // Desktop browsers
    ig.main('#canvas', MyGame, 30, 240, 224, 2);
}

Also, my canvas kept falling behind my buttons so I had to remove bottom: 0; # from my canvas's CSS. I was also having a problem with my iPhone's select feature even though I had the #-webkit-user-select: none; in my button's CSS, which kept interfering with my buttons, so I added an extra * CSS and it fixed the problem:

    * {
        -webkit-user-select: none;
    }

thanks again!