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

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

---

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

您将看到哪些浏览器支持哪些属性的大摘要

最好的方法可能是抓取页面中的一个元素（在支持的地方使用document.body，或document.getElementById或其他什么），遍历其偏移父链以找到最顶端的元素，然后检查该元素的clientWidth和clientHeight。

我会将“innerWidth”与主体的宽度进行比较。如果主体宽度>内部宽度，则存在滚动条

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

if（browserWidth（）

如果您只对宽度感兴趣，一个（非常讨厌的）解决方法是创建1px x 100%div并使用其offsetWidth。适用于IE>=7、FF、Chrome、Safari和Opera（我还没有尝试过IE6，因为我们现在正致力于一个“你很幸运，它可以工作”的所谓“不要抱怨”的“渲染”古怪事物政策）。我用属性

{position:'absolute'，top:'-1px'，left:0，width:'100%'，height:'1px'}

挂起document.body上的div，在第一次需要时创建它

---

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

只需将它添加到窗口之前。innerWidth（）检查：

---

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

---

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

这就是我所做的-学习JavaScript才半年，所以这可能是一个糟糕的修复方法。首先，我创建了一个透明的方形图像

（10px 10px）

，但您也可以创建一个非透明图像，并将其作为

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"/>

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

这是Tim Salai在这里发布的想法的一个更有效的版本（尽管您才刚刚开始，但在右下角这样放置一个元素真是太棒了）

这是一个模块化的版本

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

嗯，太酷了……我想当我弄清楚滚动条是否存在时，我不知道该怎么办……因为浏览器的滚动条大小不同……想法？@johntheblack：请注意，在windows中，更改windows主题会导致滚动条变宽，所以在测试时需要考虑到这一点。例如，vista默认主题的宽度比xp的默认主题大8个像素。这实际上不是一个坏主意。我认为您实际上需要在
GetPageHeight
和
GetPageWidth
函数中返回
Height（）
和
width（）
。另外，您的示例用法有
GetWidth（）
和
GetHeight（）
，它们应该是
GetPageWidth（）
和GetPageHeight（）`。我提到返回的原因是我尝试了您的方式编写的代码，但没有成功。在我将
Height（）
和
Width（）
更改为
Height
和
Width
之后，它工作了。（虽然我很傻，但我调整了主页的大小
DIV
，忘记了我的
DIV
上有边框，所以我不得不为此做一些额外的计算。）如果主体的宽度大于窗口（即存在一个水平滚动条），这将给出正文的宽度，而不是窗口的宽度。这个答案是错误的，因为如果将最顶端的元素设置为与窗口不同的大小，则答案将失败，例如，如果正文的内容将其拉伸超过100%（与大多数页面一样）。另请参阅
var page = new PageDimensions();
console.log("viewportWidth: " + page.GetPageWidth() + " viewportHeight: " + page.GetPageHeight());

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