javascript - 在低于 500 像素的高度更改窗口高度时，不会触发窗口调整大小事件和媒体查询

Question

我正在使用包含垂直断点的响应式设计。我看到一旦窗口高度小于 500 像素，CSS 媒体查询和窗口调整大小事件就不会触发。这可能看起来像是一个边缘用例，但残障人士确实经常调整屏幕分辨率以减少可用高度。当窗口高度小于 500px 时，水平调整大小事件仍会触发，但不会触发垂直事件。我找不到这方面的任何信息，而且我确实浪费了一些时间试图理解我所看到的，所以我想我会分享经验并询问是否有人对此有所了解。我在 IE10、Firefox 和 Chrome 中观察到了这种行为。

Answer 1

好吧，您没有提供任何代码，因此很难破译到底出了什么问题。但是，以下 JSBin 在 Chrome 中对我来说工作正常并且使用媒体查询(max-height)和 window.addEventListener('resize') 在 500px 以下没有问题。

http://jsbin.com/xumigo/1/edit?html,css,js,console,output

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'
  }
}