Wierd scaling problem on iPhone 4 in (portrait) mode.

[Learning By Doing]

Hello!

 

I have run into a wierd scaling problem on my iPhone 4 in "portrait" mode.. it works great on iPhone 5, and iphone 4 in "Landscape".

 

Its just like its missing the pixels at the bottom that the "battery & clock status bar" at the top uses.. but if I turn my phone in "landscape" mode it scales the picture, and show the missing part at the bottom, but my game is ment to run in portrait mode...

 

I have this in my index.html

 

    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-title" content="My Game" />
    <meta name="apple-mobile-web-app-status-bar-style" content="#ffffff" />
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

 

My game is built in 640x960

This is my "Boot.js"

MyGame = {orientated: false};MyGame.Boot = function (game) {};MyGame.Boot.prototype = {    preload: function () {                this.load.image('preloadBackground', 'images/preloadbackground.jpg');        this.load.image('preloadBar', 'images/preloadbar.png');    },    create: function () {        this.game.input.maxPointers = 1;        this.game.stage.disableVisibilityChange = true;        if (this.game.device.desktop) {            this.game.stage.scaleMode = Phaser.StageScaleMode.SHOW_ALL;            this.game.stage.scale.minWidth = 320;            this.game.stage.scale.minHeight = 568;            this.game.stage.scale.maxWidth = 640;            this.game.stage.scale.maxHeight = 960;            this.game.stage.scale.pageAlignHorizontally = false;            this.game.stage.scale.pageAlignVertically = true;            this.game.stage.scale.setScreenSize(true);        }        else {            this.game.stage.scaleMode = Phaser.StageScaleMode.EXACT_FIT;            this.game.stage.scale.minWidth = 320;            this.game.stage.scale.minHeight = 480;            this.game.stage.scale.maxWidth = 768;            this.game.stage.scale.maxHeight = 1024;            this.game.stage.scale.pageAlignHorizontally = false;            this.game.stage.scale.pageAlignVertically = true;            this.game.stage.scale.forceOrientation(false, true);            this.game.stage.scale.hasResized.add(this.gameResized, this);            this.game.stage.scale.enterIncorrectOrientation.add(this.enterIncorrectOrientation, this);            this.game.stage.scale.leaveIncorrectOrientation.add(this.leaveIncorrectOrientation, this);            this.game.stage.scale.setScreenSize(true);        }        this.game.state.start('Preloader');    },        gameResized: function (width, height) {    },        enterIncorrectOrientation: function () {        MyGame.orientated = false;        document.getElementById('orientation').style.display = 'block';    },    leaveIncorrectOrientation: function () {        MyGame.orientated = true;        document.getElementById('orientation').style.display = 'none';    }    };

Im kinda new to all this programming, I maybe did something wrong in the code above?

[Neoprofessor]

Can you post a web address, so I can run it through a IPhone web emulator and see the sizing issue.