Question

如何使用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;
}

任何想法？我需要它在所有浏览器中工作;）

Answer 1

如果你只对宽度感兴趣，那么（显着讨厌的）解决方法是创建1px x 100％div并使用其offsetWidth。适用于IE＆gt; = 7，FF，Chrome，Safari和Opera（我没有尝试过IE6，因为我们正在为一个你很幸运的人工作 - 所有 - 所以不要抱怨 - 这些天 - 关于渲染 - 古怪的政策。我将具有属性{ position: 'absolute', top: '-1px', left: 0, width: '100%', height: '1px' }的document.body挂起来，在第一次需要时创建它。

如果你能忍受它就会起作用。

Answer 2

您可以找到哪些浏览器on this page on quirksmode.org支持的属性的大摘要。

你最好的选择可能是抓取页面中的元素（使用document.body支持，或者document.getElementById或其他），遍历其offsetParent链以找到最顶层的元素，然后检查该元素的clientWidth和clientHeight。 / p>

Answer 3

只需在window.innerWidth（）检查之前添加：

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

Answer 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;

Answer 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

Answer 6

我会将“innerWidth”与身体的宽度进行比较。如果体宽>内部宽度，然后是滚动条。

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

Answer 7

您可以尝试的另一种解决方案是更改一些CSS，以便在您的页面中进行滚动，而不是浏览器窗口。在body的样式中，添加overflow：auto。现在body元素包含滚动条，所以当你得到窗口宽度时，你要测量滚动容器外面的宽度而不是内部。

这确实是一种潜在的怪癖来源，也可能是一个可访问性问题，所以如果你要广泛使用，你可能需要仔细测试它。

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

7 个答案: