當窗口高度更改為低於500像素的高度時，窗口調整大小事件和媒體查詢不會觸發

Question

我正在使用包含垂直斷點的響應式設計。 我看到，一旦窗口高度小於500px，CSS媒體查詢以及窗口大小調整事件就不會觸發。 這看起來像是一個附帶的用例，但殘障人士確實經常調整屏幕分辨率，從而留下較少的可用高度。 當窗口高度小於500px時，仍會觸發水平調整大小事件，但不會觸發垂直調整大小事件。 我找不到任何相關信息，並且確實浪費了一些時間來了解自己所看到的內容，因此我想與您分享經驗，並詢問是否有人對此有所了解。 我在IE10，Firefox和Chrome中觀察到了這種行為。

Answer 1

好吧，您沒有提供任何代碼，因此很難准確地找出問題所在。 但是，下面的JSBin在Chrome中對我來說效果很好，並且同時使用了媒體查詢（ max-height ）和window.addEventListener('resize') ，在500px以下沒有問題。

http://jsbin.com/xumigo/1/edit?html,css,js，控制台，輸出

window.addEventListener('resize', function(e) {
  console.log(window.innerHeight);
});


@media (max-height:600px) {
  body {
    background: red;
  }
  body::before {
    content: '600px'
  }
}
@media (max-height:500px) {
  body {
    background: blue;
  }
  body::before {
    content: '500px'
  }
}
@media (max-height:400px) {
  body {
    background: orange;
  }
  body::before {
    content: '400px'
  }
}
@media (max-height:300px) {
  body {
    background: yellow;
  }
  body::before {
    content: '300px'
  }
}
@media (max-height:200px) {
  body {
    background: black;
    color: #FFF;
  }
  body::before {
    content: '200px'
  }
}
@media (max-height:100px) {
  body {
    background: gray;
    color: #000;
  }
  body::before {
    content: '100px'
  }
}