js設備和方向檢測

我已經基於我已閱讀過的其他腳本編寫了此腳本，並考慮到我是js/jquery的新手。js設備和方向檢測

我想在頁面加載和方向更改時檢測設備的大小和方向。

因此，我可以對每種情況應用不同的規則。

它在Android設備上效果很好，但是我發現它在ipad的縱向模式下沒有工作現在我無法弄清楚我做錯了什麼。即使在js lint我也沒有設置所有的腳本，等等。一點幫助會很好。這是我寫的代碼。

如果使用PHP

$(document).ready(function(){ 


var height = $(window).height(); 
var width = $(window).width(); 

if ($(window).width() < 768) { 
if(width>height) { 
    // Smartphone Landscape Rules 
    var orientation = ' Landscape'; 
}else{ 
    // Smartphone Portrait Rules 
    var orientation = ' Portrait'; 
    } 
alert ('Smartphone '+width+' - '+height+orientation); 
} 
if ($(window).width() > 768) { 
if(width>height) { 
    // Tablet Landscape Rules 
    var orientation = ' Landscape'; 
}else{ 
    // Tablet Portrait Rules 
    var orientation = ' Portrait'; 
    } 
alert ('Tablet '+width+'-'+height+orientation); 
} 

$(window).resize(function(){ 
var height = $(window).height(); 
var width = $(window).width(); 

alert (width+' - '+height); 

if ($(window).width() < 768) { 
    if(width>height) { 
    // Smartphone Landscape Rules 
    var orientation = ' Landscape'; 
}else{ 
    // Smartphone Portrait Rules 
    var orientation = ' Portrait'; 
    } 
alert ('Smartphone '+width+'-'+height+orientation); 
} 
if ($(window).width() > 768) { 
    if(width>height) { 
    // Tablet Landscape Rules 
    var orientation = ' Landscape'; 
}else{ 
    // Tablet Portrait Rules 
    var orientation = ' Portrait'; 
    } 
    alert ('Tablet '+width+'-'+height+orientation); 
} 
}); 
});

來源

2012-09-28 SmileyWar

爲什麼不使用媒體查詢？ –

@Camhänget指出，媒體查詢將是一個好主意。如果你使用的是jQuery Mobile，你也可以試試'$（document）.pageCreate（function（）{}）'而不是'.ready'。 –

，因爲我沒有應用已經單獨完成的不同的CSS樣式表。該腳本將被觸發以應用不同的腳本，因爲它根據設備的大小和方向而有不同的反應。 – SmileyWar

我發現我的問題，這是檢測移動設備上的此代碼時，纔會觸發的，如果更多的則規則必須是1個像素小於實際尺寸能夠被iPad檢測到。

這裏是代碼，如果有人感興趣。當我添加它們來測試所有方向和刷新時，只需忽略警報即可。

var height = $(window).height(); 
var width = $(window).width(); 

if ($(window).width() < 768) { 
if(width>height) { 
    // Smartphone Landscape Rules 
    var orientation = ' Landscape'; 
}else{ 
    // Smartphone Portrait Rules 
    var orientation = ' Portrait'; 
    } 
alert ('Smartphone '+width+' - '+height+orientation); 
} 
if ($(window).width() > 767) { 
if(width>height) { 
    // Tablet Landscape Rules 
    var orientation = ' Landscape'; 
}else{ 
    // Tablet Portrait Rules 
    var orientation = ' Portrait'; 
    } 
alert ('Tablet '+width+'-'+height+orientation); 
} 

$(window).resize(function(){ 
var height = $(window).height(); 
var width = $(window).width(); 

if ($(window).width() < 768) { 
    if(width>height) { 
    // Smartphone Landscape Rules 
    var orientation = ' Landscape'; 
}else{ 
    // Smartphone Portrait Rules 
    var orientation = ' Portrait'; 
    } 
alert ('Smartphone '+width+'-'+height+orientation); 
} 
if ($(window).width() > 767) { 
    if(width>height) { 
    // Tablet Landscape Rules 
    var orientation = ' Landscape'; 
}else{ 
    // Tablet Portrait Rules 
    var orientation = ' Portrait'; 
    } 
    alert ('Tablet '+width+'-'+height+orientation); 
} 
});

來源

2012-10-01 09:45:20 SmileyWar

僅供參考 - 您在任何設備尺寸的情況下都沒有做任何不同的工作。景觀，否則是縱向，就是這樣 –

這並不是說寬度或高度需要少一個像素，你應該改變你的比較，使用'<=' or '> ='instea d'<' or '>'。 – evolutionxbox

由於我發現window.orientation值根據Android上的設備（平板電腦/手機）而不同。我用下面的代碼在Android屏幕模式定義：

function isPortraitMode(){ 
    var screenWidth = Math.max(window.innerWidth, window.innerHeight); 
    if (typeof window._myScreenWidth === 'undefined' // called at the first time (during the load) and the keyboard is not shown (won't take some height) 
     || window._myScreenWidth < screenWidth){ // sometimes window appears with animation and smaller size can be gathered during the animation at first time 
     window._myScreenWidth = screenWidth; 
    } 
    return (window.innerWidth < window._myScreenWidth); 
}

據預計，由於鍵盤改變了window.innerHeight鍵盤是第一次通話過程中隱藏。第一次加載時調用isPortraitMode()。

該函數在方向更改和調整事件時也被調用。

來源

2015-08-10 10:30:44 Arseny

js設備和方向檢測

回答

相關問題