当前浏览器的网页宽度和网页高度

Question

当前浏览器的网页宽度和网页高度

4

我尝试构建一个适用于几乎所有设备/浏览器的Web应用程序。为此，我的实际方法是在body中定义一个div，该div将占据整个body的空间：

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

我使用以下方式计算可用空间的宽度和高度：

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

我完成后会用jQuery/CSS（百分比、top属性、绝对定位等）定位我的元素，用Raphael.js进行绘制……

我发现这种方法并不总是有效的，特别是在一些将附加组件显示为HTML的浏览器中。例如，在我的Chrome浏览器中，当我安装一个工具栏附加组件时，这个工具栏会作为HTML元素呈现在页面代码源中，并带有自己的样式（top=0，fixed position等）。结果是我的所有top位置工作都被工具栏的高度所影响。

如何计算body的净高度？有哪些可替代的方法来创建适应浏览器大小的网页（我指的是DOM注入到我控制之外的元素，例如ask.com工具栏……）？

- Adib Aroui

1

可能是使用JavaScript获取浏览器视口尺寸的重复问题。 - Rory McCrossan

@RoryMcCrossan，谢谢您提供的链接，我正在阅读。我完成了我的作业，但没有使用关键字“视口”。再次感谢。 - Adib Aroui

2个回答

1

我建议您使用"变异观察器"来检测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
  //...
});

- Alvaro

你提供的链接非常重要，它指向了我所需要的内容... 我会回来寻求反馈，再次感谢 +1 - Adib Aroui

当前的变异观察实现（DOMNodeInserted，MutationObserver）的性能开销不是很高吗？看起来 DOMNodeInserted 的性能更好（http://jsperf.com/mutationobserver-vs-css-animation-vs-mutation-events-2）。 - Rob M.

@RobM. MutationEvents 的性能很差（DOMNodeInserted 是一个 Mutation Event）。MutationObserver 被创建为 MutationEvent 的高性能替代品。请参阅 https://dev.opera.com/articles/mutation-observers-tutorial/ 了解更多详情。 - bluesmoon

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rob M. · Accepted Answer

编辑: 我稍微思考了一下这个问题，我认为如果插件要绘制到DOM上，它很可能会将自身附加到body。因此，如果您按照如下方式结构化文档体：

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

"并且这个插件像这样插入了自己：" （保留HTML标签）

<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链接的问题回答了你的问题，我想补充说明的是，创建响应式网站的首选方法是使用媒体查询来适应各种宽度（移动设备、平板电脑、桌面电脑）调整CSS。这里有一个使用Twitter Bootstrap实现媒体查询的示例，打开该页面并调整浏览器窗口大小。

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

关于在HTML中呈现工具栏和其他组件的问题，这将很难克服，因为您无法知道任何一个元素会在您无法控制的情况下注入到DOM中。如果您针对特定用例，请指向该附加组件，可能会有解决方案。