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

然后您可以监听窗口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，但它远非完美。

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

2 个答案: