1

I am usig AppMobi XDK and want to applying some styling on different devices according to their screen resolution.The problem is that I can't determine the width and height of my any simulated device. Please help

Saima
  • 31
  • 4

3 Answers3

2

You can get the size based off window.innerHeight and window.innerWidth.

There is an issue in the XDK where it's not available until 300ms+ after appMobi.device.ready event is fired.

0

From Ian comment it takes 300ms after the appMobi.device.ready is trigger.

Inside your index.html file just add a setTimeout inside the onDeviceReady function.

var onDeviceReady=function(){
    //Size the display to 768px by 1024px
   // AppMobi.display.useViewport(768,1024); 
   //hide splash screen
    AppMobi.device.hideSplashScreen();  

    setTimeout(setDisplayScreen, 300);

};

In My case I just wanted to have the footer at the bottom of the screen and I already set it in PX.

function setDisplayScreen(){
   var dHeight = window.innerHeight;
   document.getElementById("footer").style.top = dHeight - 70 + "px";

}

And it work just fine. There is a small delay before the footer appear but that not bad.

Manuel Choucino
  • 667
  • 4
  • 6
0

Problem is that window height is incorrect when device ready. This worked fine for me:

var onDeviceReady = function () {

intel.xdk.device.setRotateOrientation("any");
intel.xdk.device.setAutoRotate(true);

setTimeout(setDisplayScreen, 300);

function setDisplayScreen() {
    var dHeight = window.innerHeight;
        $('body').css('height', dHeight)
    intel.xdk.device.hideSplashScreen();       

}

};

user4046052
  • 1