Jump to content

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

Learning By Doing

Recommended Posts



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?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...