使用javascript可以檢測iPad或Galaxy Tab上瀏覽器方向的變化嗎？我認(rèn)為使用css媒體查詢是可能的。

注意:orientationChange已被否決

而是使用screen.orientation使用screenOrientation接口

這是由screenorientation.onchange事件觸發(fā)的

window.addEventListener("DOMContentLoaded", () => {
  const output = document.getElementById("o9n");
  const displayOrientation = () => {
    const screenOrientation = screen.orientation.type;
    output.innerHTML = `The orientation of the screen is: ${screenOrientation}`;
    if (screenOrientation === "landscape-primary") {
      console.log("That looks good.");
    } else if (screenOrientation === "landscape-secondary") {
      console.log("Mmmh... the screen is upside down!");
    } else if (screenOrientation === "portrait-secondary" || screenOrientation === "portrait-primary") {
      console.log("Mmmh... you should rotate your device to landscape");
    } else if (screenOrientation === undefined) {
      console.log("The orientation API isn't supported in this browser :(");
    }
  };

  if (screen && screen.orientation !== null) {
    try {
      window.screen.orientation.onchange = displayOrientation;
      displayOrientation();
    }
    catch (e) { output.innerHTML = e.message; }
  }
});

Orientation: <span id="o9n"></span>

在2022年，你應(yīng)該監(jiān)聽一個(gè)屏幕，而不是添加一個(gè)窗口方向改變監(jiān)聽器(由于不贊成，不推薦監(jiān)聽器)。

if (screen.orientation) { // Property doesn't exist on screen in IE11   
    screen.orientation.addEventListener("change", callback);
}

現(xiàn)在除了IE和Safari以外的所有瀏覽器都支持。(以下是IE11的屏幕截圖:

...請注意，方向不是IE11中支持的屏幕屬性)

屏幕方向API有完整的文檔記錄。主要焦點(diǎn)是ScreenOrientation接口，它擴(kuò)展了Screen。這里有2個(gè)屏幕方向?qū)傩缘慕貓D，顯示了角度如何在Android設(shè)備上從0(縱向)變?yōu)?0(橫向):

您可以使用mediaMatch來評(píng)估CSS媒體查詢，例如

window
    .matchMedia('(orientation: portrait)')
    .addListener(function (m) {
        if (m.matches) {
            // portrait
        } else {
            // landscape
        }
    });

CSS媒體查詢在orientationchange之前觸發(fā)。如果要捕捉事件的結(jié)尾(當(dāng)旋轉(zhuǎn)完成時(shí))，請參見方向更改后的移動(dòng)視口高度。

您可以像這樣使用orientationchange事件:

window.addEventListener('orientationchange', function(event) {
     /* update layout per new orientation */
});

我意識(shí)到，在這個(gè)帖子中，沒有人提到當(dāng)設(shè)備被倒置時(shí)會(huì)發(fā)生什么。 當(dāng)保持水平時(shí)，window.orientation返回-90或90。當(dāng)保持垂直時(shí)，它返回0或180。有些設(shè)備支持，有些不支持倒置。我推薦，

window.addEventListener("orientationchange", function() {
  
  if ( window.orientation == 0 || window.orientation == 180) {
    // WHEN IN PORTRAIT MODE
    
  } else {
    // WHEN IN LANDSCAPE MODE
    
  }
}, false);

還要注意，window.orientation在桌面上返回undefined。

來自“跨設(shè)備、跨瀏覽器縱向-橫向檢測”

這是關(guān)于找出移動(dòng)設(shè)備是處于縱向模式還是橫向模式；你不需要關(guān)心它的方向。眾所周知，如果你把iPad倒過來拿，它會(huì)處于縱向模式。

$(window).bind("resize", function(){
    screenOrientation = ($(window).width() > $(window).height())? 90 : 0;
});

90代表橫向，0代表縱向，跨瀏覽器，跨設(shè)備。

window.onresize事件隨處可見，而且總是在合適的時(shí)間被激發(fā)；不會(huì)太早，也不會(huì)太晚。事實(shí)上，屏幕的大小也總是準(zhǔn)確的。

JavaScript版本應(yīng)該是這樣的，如果我錯(cuò)了，請糾正我。

function getScreenOrientation() {
    screenOrientation = window.outerWidth > window.outerHeight ? 90 : 0;
    console.log("screenOrientation = " + screenOrientation);
  }
  window.addEventListener("resize", function(event) {
    getScreenOrientation();
  });
  getScreenOrientation();

window.orientation就是你要找的東西。還有一個(gè)onOrientationChange事件 適用于安卓、iphone，我敢肯定，也適用于ipad

在@mplungjan的回答中，我發(fā)現(xiàn)使用webkit“本地”(我不知道如何稱呼它)事件“deviceorientation”會(huì)有更好的結(jié)果。

在Mozilla開發(fā)者網(wǎng)絡(luò)中，他們有一個(gè)關(guān)于如何在webkit和Gecko之間標(biāo)準(zhǔn)化的很好的解釋，幫助我解決了這個(gè)問題。

一個(gè)易于使用的片段:

function doOnOrientationChange()
{
    switch(window.orientation)
    { 
        case -90:
        case 90:
          // alert('landscape');
          $('#portrait').css({display:'none'});
          $('#landscape').css({display:'block'});

          break;
        default:
          // alert('portrait');
          $('#portrait').css({display:'block'});
          $('#landscape').css({display:'none'});
          break;
    }
}

window.addEventListener('orientationchange', doOnOrientationChange);

// First launch
doOnOrientationChange();

orientationChange已被棄用，在某些瀏覽器中也不受支持， 在ios中，innerHeight和outerHeight有時(shí)會(huì)給出不一致的結(jié)果 所以我們可以使用document.documentElement來檢查方向和resize事件

const { clientWidth, clientHeight } = document.documentElement;
 
if (clientHeight > clientWidth) {
      setOrientation("portrait-secondary");
    } else {
      setOrientation("landscape-primary");
    }

直接從90°切換到270°時(shí)，RESIZE不會(huì)觸發(fā)(中間不會(huì)觸發(fā)縱向視圖)

因此我們不能依賴 window . addevent listener(& quot；調(diào)整大小& quot，screenOrientationHasChanged)；

也有同樣的問題 window . screen . orientation . addevent listener(' change '，screenOrientationHasChanged)；

還與 window . addevent listener(& quot；方向改變& quot，screenOrientationHasChanged)；

可悲的是，這意味著到2022年，即使使用setInterval，也沒有可靠的方法來檢測屏幕方向的變化 因?yàn)楫?dāng)你從90°到270°之間沒有觸發(fā)縱向視圖時(shí)，screen.orientation.angle和screen.orientation.type都不會(huì)更新。

所以下面的內(nèi)容并不比移動(dòng)設(shè)備上的resize好多少

if (screen.orientation) {
  window.screen.orientation.addEventListener('change',screenOrientationHasChanged); // https://whatwebcando.today/screen-orientation.html
} else {
  window.addEventListener("orientationchange",screenOrientationHasChanged); // https://developer.mozilla.org/en-US/docs/Web/API/Window/orientationchange_event
}

你可以嘗試鎖定屏幕方向以避免錯(cuò)誤，但從2022年開始，這在iOS上不起作用，并且只能在Android的全屏模式下工作。