Question

我尝试构建一个适合几乎所有尺寸的设备/浏览器的Web应用程序。要做到这一点，我的实际方法是在我的body内定义div，它将占据整个身体空间：

#mydiv {
width: 100%;
height: 100%;
}

然后使用以下方法计算可用空间的宽度和高度：

var Width= $("#mydiv").width();
var Height= $("#mydiv").height();

我做了我想做的事。我用jQuery / CSS定位我的元素（百分比，顶级属性，绝对位置，...），我用Rapahael.js绘制....

我发现这种方法并不总是有效，特别是对于将其插件显示为HTML的浏览器。例如，在我的Chrome中，当我安装工具栏插件时，此工具栏在页面代码源中呈现为具有各自样式的HTML元素（顶部= 0，固定位置..）。结果是我在顶部位置的所有工作都移动了工具栏的高度。

如何计算身体的净高度？什么是创建适应网络浏览器大小的网页的替代方法（我的意思是在我的控制之外的任何DOM注入元素之后，如ask.com工具栏......）？

Answer 1

编辑：所以我稍微考虑了这个问题，并且我认为如果附加组件要绘制到DOM，它很可能会将自己附加到body 。因此，如果您以这种方式构建文档正文：

<body>
  <div id="container">
    ... all your content here
  </div>
</body>

并且插件自身插入如下：

<body>
   <div id="toolbar" style="margin:0;padding:5px;position:fixed;top:0px;left:0px;width:100%;height:20px;background-color:#000;color:#fff">toolbar</div>
   <div id="container">
     ... all your content here
   </div>
</body>

您可以通过将#container的位置设置为relative并将以下脚本添加到您的页面来解决此问题：

var shift_amount = 0; 
var children = document.body.children;
for(var i = 0; i < children.length; i++){ 
    if(children[i].style.position == 'fixed'){ 
        shift_amount += parseFloat(children[i].style.height); 
    }
}

var Height = $(window).height();
var Width =  $(window).width();

if(shift_amount > 0){
    // subtract fixed element height from available height
    Height -= shift_amount;
}

由于我非常确定@RoryMcCrossan链接的问题回答了您提出的问题，我将补充说，创建自适应网站的首选方法是使用media queries来调整各种宽度的CSS（移动设备，平板电脑），桌面）。以下是media queries in action using Twitter Bootstrap的示例，打开该页面并调整浏览器窗口大小。

<style>
/* target only browsers less than or equal to 600px; */
@media (max-width: 600px) {
  .sidebar {
    display: none;
  }
}
</style>

关于在HTML中呈现工具栏和其他组件的问题，这将难以克服，因为您无法知道将在控件之外注入DOM的任何元素。如果您针对的是特定用例，请将我们指向该附加组件，并且可能有一个可供查找的解决方案。

Answer 2

我会看一下"mutation observers"来检测DOM结构的变化。

然后你可以再次获得这些价值。

MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

var observer = new MutationObserver(function(mutations, observer) {
    // fired when a mutation occurs
    Width= $("#mydiv").width();
    Height= $("#mydiv").height();  
});

// define what element should be observed by the observer
// and what types of mutations trigger the callback
observer.observe(document, {
  subtree: true,
  attributes: true
  //...
});

当前浏览器的净宽度和净高度

2 个答案: