检测窗口宽度并补偿滚动条 - Javascript答案

【问题标题】：detect window width and compensate for scrollbars - Javascript检测窗口宽度并补偿滚动条 - Javascript
【发布时间】：2010-10-10 09:52:55
【问题描述】：

如何使用 Javascript 检测用户窗口的宽度并考虑他们的滚动条？（我需要滚动条内的屏幕宽度）。这就是我所拥有的......它似乎可以在多个浏览器中工作......除了它不考虑滚动条......

    function browserWidth() {
  var myWidth = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
  } else if( document.documentElement && document.documentElement.clientWidth ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
  } else if( document.body && document.body.clientWidth ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
  }
  return myWidth;
}

有什么想法吗？我需要它在所有浏览器中工作；）

【问题讨论】：

另见stackoverflow.com/q/8339377/1136253

标签： javascript screen width

【解决方案1】：

如果您只对宽度感兴趣，一个（非常讨厌的）解决方法是创建一个 1px x 100% 的 div 并使用它的 offsetWidth。适用于 IE>=7、FF、Chrome、Safari 和 Opera（我没有尝试过 IE6，因为我们正在努力让你很幸运，它可以正常工作，所以不要抱怨-关于这些天的渲染奇数政策）。我使用属性{ position: 'absolute', top: '-1px', left: 0, width: '100%', height: '1px' } 将 div 挂在 document.body 上，在第一次需要时创建它。

如果你能忍受它就可以工作。

【讨论】：

【解决方案2】：

您会发现哪些浏览器支持哪些属性的大摘要on this page on quirksmode.org。

您最好的选择可能是抓取页面中的一个元素（在支持的情况下使用 document.body 或 document.getElementById 或其他），遍历其 offsetParent 链以找到最顶部的元素，然后检查该元素的 clientWidth 和 clientHeight。

【讨论】：

这个答案是错误的，因为如果最上面的元素设置为与窗口不同的大小，例如如果正文的内容将其拉伸到 100% 以上（如大多数页面），它将失败。

【解决方案3】：

只需在 window.innerWidth() 检查之前添加：

if (typeof(document.body.clientWidth) == 'number') {
    // newest gen browsers
    width = document.body.clientWidth;
    height = document.body.clientHeight;
}

【讨论】：

如果主体的宽度大于窗口（即存在水平滚动条），这将给出主体的宽度而不是窗口的跨度>

【解决方案4】：

这就是我所做的——学习 JavaScript 才半年，所以这可能是一个不好的解决方法。首先，我创建了一个透明方形图像(10px x 10px)，但您也可以创建一个非透明图像并将其添加到您的 JavaScript 中
document.getElementById('getDimensions').style.visibility = "hidden";

HTML：

<img id="getDimensions" src="images/aSmallBox.png" alt="A small transparent image  
meant to determine the dimensions of the viewport" width="10px" height="10px"/>

JavaScript：

//Inside function called by window.onload event handler (could go in CSS file, but   
//better to keep it with other related code in JS file)
document.getElementById('getDimensions').style.position = "fixed";
document.getElementById('getDimensions').style.bottom = "0px";
document.getElementById('getDimensions').style.right = "0px";   

//Everything below inside function called by window.onresize event handler
var baseWidthCalculation = document.getElementById('getDimensions').offsetLeft;
var baseHeightCalculation = document.getElementById('getDimensions').offsetTop;
  //Account for the dimensions of the square img element (10x10)
var viewportWidth = baseWidthCalculation + 10;
var viewportHeight = baseHeightCalculation + 10;

【讨论】：

这其实也不错

【解决方案5】：

这是 Tim Salai 在此处发布的一个想法的更有效版本（即使您才刚刚开始，在右下角放置这样的元素也很棒）。

var getDimensions = document.createElement("div");
getDimensions.setAttribute("style", 
            "visibility:hidden;position:fixed;bottom:0px;right:0px;");
document.getElementsByTagName("body")[0].appendChild(getDimensions);
var viewportWidth = getDimensions.offsetLeft;
var viewportHeight = getDimensions.offsetTop;

这是一个模块化版本

var PageDimensions = function(){
 var Width;
 var Height;     

 function pagedimensionsCtor (){
   var getDimensions = document.createElement("div");
   getDimensions.setAttribute("style" , 
         "visibility:hidden;position:fixed;bottom:0px;right:0px;");
   document.getElementsByTagName("body")[0].appendChild(getDimensions);
   Width = getDimensions.offsetLeft;
   Height = getDimensions.offsetTop;
   getDimensions.parentNode.removeChild(getDimensions);
 }
 pagedimensionsCtor();

 function Reset(){
  pagedimensionsCtor();
 }     

 function GetPageHeight(){
  return Height;
 }

 function GetPageWidth(){
  return Width;
 }

 return{
  Reset: Reset,
  GetPageHeight: GetPageHeight,
  GetPageWidth: GetPageWidth
 };
}

使用模块化版本：

var page = new PageDimensions();
console.log("viewportWidth: " + page.GetPageWidth() + " viewportHeight: " + page.GetPageHeight());

奖励功能：

page.Reset();//just in case you think your dimensions have changed

【讨论】：

我认为您实际上需要在 GetPageHeight 和 GetPageWidth 函数中返回 Height 和 Width 而不是 Height() 和 Width() 。此外，您的示例用法有GetWidth() 和GetHeight()，应该是GetPageWidth() 和GetPageHeight()`。
我说退货的原因是我按照你的方式尝试了代码，但没有成功。在我将Height() 和Width() 更改为Height 和Width 之后，它起作用了。（虽然我很傻，我调整了我的主页 DIV 的大小并忘记了我的 DIV 有边框，所以我必须为此做一些额外的数学运算。）

【解决方案6】：

我会将“innerWidth”与身体的宽度进行比较。如果 body width > innerwidth，则存在滚动条。

if (browserWidth() < document.body.offsetWidth) {
  doSomething();
}

【讨论】：

hmmm 很酷...我想当我确定是否存在滚动条时该怎么办...因为浏览器有不同大小的滚动条...想法？
@johnintheblack：请注意，在windows中，更改windows主题会导致滚动条改变宽度，因此在测试时需要考虑这一点。例如，vista 默认主题的宽度比 xp 的默认主题大 8 个像素。

【解决方案7】：

您可以尝试的另一种解决方案是更改一些 CSS，以便滚动发生在您的页面内，而不是浏览器窗口执行此操作。在正文的样式中，添加溢出：自动。现在 body 元素包含滚动条，因此当您获得窗口宽度时，您测量的是滚动容器外部而不是滚动容器内部的宽度。

这确实是一个潜在的古怪来源，并且可能是一个可访问性问题，因此如果您打算广泛使用它，您可能需要非常仔细地测试它。

【讨论】：