在平板電腦上檢測屏幕方向的最佳全局方法是什么

Question

我正在尋找一種全球解決方案，可以檢測平板電腦（不僅是iPad或Android設備，而且越好）的方向。

一種解決方案：

  device.portrait = function() {
    return (window.innerHeight / window.innerWidth) > 1;
  };

  device.landscape = function() {
    return (window.innerHeight / window.innerWidth) < 1;
  };

我的觀點是，上面的方法效果不佳。

我需要一個好的解決方案，以在方向改變時在縱向視圖中的輪播中加載專用圖像，在橫向視圖中加載專用圖像。

干杯。

Answer 1

為此使用媒體查詢

對於風景

@media screen and (min-width: 700px) and (orientation: landscape) { 
    /*css for a image*/ 
}

對於肖像

@media screen and (min-width: 700px) and (orientation: portrait) { 
    /*css for different image*/
}

Answer 2

我不知道為什么您的代碼無法正常工作。
但是我建議您使用對我有用的這段代碼 ，

<span id="orientation">orientation</span>​

$(document).ready(checkOrientation);
$(window).resize(checkOrientation);

function checkOrientation() {
    var orientation = "Portrait";
    var screenWidth = $(window).width();
    var screenHeight = $(window).height();
    if (screenWidth > screenHeight) {
        orientation = "Landscape";
    }
    $("#orientation").html(orientation);
}​

你可以在這里看到演示 ！