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

2023年7月25日 220次阅读

我尝试构建一个适合几乎所有尺寸的设备/浏览器的Web应用程序.要做到这一点,我的实际方法是在我的身体内部定义一个占据整个身体空间的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工具栏……)？

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

<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的任何元素.如果您针对的是特定用例,请将我们指向该附加组件,并且可能有一个可供查找的解决方案.

点赞