聆听响应式网页设计的浏览器宽度？

Question

我正在努力使我的网站移动友好。

我想知道浏览器窗口的大小，以便当它比728px更窄时做一些事情，而当它更大时，我会做一些事情。

这必须考虑在PC上调整窗口大小以及在手机中从纵向模式更改为横向模式。

如何才能做到这一点？

Answer 1

正如m90所说，如果你想做的唯一事情就是修改风格，那么你应该看一下媒体查询 。 但是，如果您想要做的不仅仅是修改样式，那么您必须依赖JavaScript。

简单的JavaScript

问题是获得窗口的宽度并不完全是直接的，它在浏览器之间有所不同。 所以你必须创建一个这样的函数（未经测试）：

var width = 0;
function updateWindowSize() {
    if (document.body && document.body.offsetWidth) {
      width = document.body.offsetWidth;
    }
    if (document.compatMode=='CSS1Compat' &&
        document.documentElement &&
        document.documentElement.offsetWidth ) {
       width = document.documentElement.offsetWidth;
    }
    if (window.innerWidth) {
       width = window.innerWidth;
    }
}

然后您可以监听窗口onresize事件，并在每次窗口更改时调用该函数以获取新的窗口大小。

window.onresize = function(event) {
    updateWindowSize();
}

jQuery的

如果你使用jQuery，那么这可以做得更短一点，因为jQuery负责在幕后为你提供跨浏览器支持：

var width;
$(window).resize(function() {
  width = $(window).width();
});

Answer 2

作为警告，IE8及更低版本不支持媒体查询或CSS3。 如果你不关心IE8，那就去吧。 Respond.js，Modernizr和其他人可以帮助支持IE6-8，但它远非完美。