HTML5，Javascreen如果縱向/橫向顯示圖像

我正在尋找腳本來檢測屏幕是橫向還是縱向而不旋轉手機（初始屏幕大小，如果需要）以顯示圖像以旋轉設備如果遊戲是橫向的（並且頁面的初始負載是縱向的）。HTML5，Javascreen如果縱向/橫向顯示圖像

我發現了很多關於「orientation orientation」事件的信息，但沒有發現頁面初始加載時的視圖。

2015-10-05 bruno

可能重複[檢測視口方向，如果方向是肖像顯示警告消息，建議用戶使用說明]（http://stackoverflow.com/questions/4917664/detect-viewport-orientation-if-orientation-is-portrait- display-alert-message-ad） – OddDev

只需做一個簡單的檢查，看看當前寬度>當前高度。如果是這樣，你是風景，否則你是肖像......不知道什麼是「Javascreen」，但使用Javascript，你可以使用'window.innerWidth'和'window.innerHeight'。 –

@ Pot-Nut，正確..什麼重複問題的標記答案說..但我不知道這是最好的答案..我確定有一個窗口屬性的HTML5規範的方向..或一個用於工作草案的polyfill。 –

您可以

function isPortrait() { 
    if (typeof (window.orientation) != 'undefined') { 
    return (window.orientation === 0 || window.orientation === 180); 
    } 
    else { 
    return (window.innerHeight > window.innerWidth); 
    } 
}

測試它是否支持window.orientation屬性，如果它是不是檢查，如果窗高度大於窗口寬度嘗試。

編輯。 window.orientation比寬度和高度測試更受歡迎，因爲在移動設備上當屏幕鍵盤彈出窗口高度變化時會給出錯誤的橫向信息。

編輯。您也可以使用媒體查詢，但如果您選擇的瀏覽器不支持它，則無論您選擇哪種方式，都一定要有後備功能。

http://caniuse.com/#search=matchmedia

來源

2015-10-05 15:11:58

，只要你想就執行這個。

if (window.matchMedia("(orientation: landscape)").matches){ 

    //Go landscape 
}; 
else { 

    // Go portrait 
}

警告：這會給你瀏覽器的方向。不是設備。所以，我認爲瀏覽器已經最大化，可以自動適應您設備的屏幕。

Google針對「媒體查詢」獲取有關媒體更改的更多信息。

來源

2015-10-05 15:12:51

HTML5，Javascreen如果縱向/橫向顯示圖像

回答

相關問題