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

我正在努力使我的网站移动友好。收听响应式网页设计的浏览器宽度？

我想知道浏览器窗口的大小，以便在它比728px更窄时执行某些操作，而当它更大时则执行其他操作。

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

这怎么办？

来源

2012-05-11 lisovaccaro

您可以使用[CSS3媒体查询]（http://www.w3.org/TR/css3-mediaqueries/） – m90

做一个关于css网格系统或适应性网格或响应式设计的搜索//作为exapmle [960 grid系统]（http://960.gs/） –

也许你正在寻找响应式设计的_Width管理工具_ https://github.com/pyrsmk/W –

正如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(); 
});

来源

2012-05-11 08:30:24

奇怪的是，我不得不使用你的Vanilla JS，jQuery正在返回我错误的宽度与Mac OS X，Chrome版本35.0.1916.114。 –

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

来源

2013-04-18 14:47:44 LisKit

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

回答

相关问题