Window 当 window 高度在 500 像素以下发生变化时，不会触发调整大小事件和媒体查询

Question

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

中观察到了这种行为

Answer 1

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

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

Window 当 window 高度在 500 像素以下发生变化时，不会触发调整大小事件和媒体查询

Window resize events and media queries do not fire when window height is changed at heights under 500px

javascript

css

responsive-design