Определение ширины и высоты в AppMobi XDK

Question

Я использую AppMobi XDK и хочу применить некоторые стили на разных устройствах в соответствии с их разрешением экрана. Проблема в том, что я не могу определить ширину и высоту моего любого имитируемого устройства. Пожалуйста, помогите

Answer 1

Вы можете получить размер на основе window.innerHeight и window.innerWidth.

В XDK есть проблема, когда он недоступен до 300 мс после события appMobi.device.ready.

Answer 2

Из комментария Яна требуется 300 мс после того, как appMobi.device.ready является триггером.

Внутри вашего файла index.html просто добавьте setTimeout внутри функции onDeviceReady.

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

    setTimeout(setDisplayScreen, 300); 

}; 

В моем случае я просто хотел иметь нижний колонтитул в нижней части экрана, и я уже установил его в PX.

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

} 

И он отлично работает. Существует небольшая задержка до появления нижнего колонтитула, но это неплохо.

Answer 3

Проблема в том, что высота окна неверна, когда устройство готово. Это работало отлично для меня:

уага onDeviceReady = функция() {

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();  

}  

};