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

Question

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

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

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

如何才能做到这一点？

Answer 1

正如 m90 建议的那样，如果您只想修改样式，那么您应该看看media queries。但是，如果您想做的不仅仅是修改样式，那么您必须依赖 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;
    }
}

然后你可以监听 window 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，但远非完美。