Question

我正在尝试查找页面的完整宽度，我在answers上跟踪了很多SO但没有运气

我试过了

$(document).width()
window.outerWidth
window.innerWidth
document.body.scrollWidth
document.body.clientWidth

我尝试在底部带有水平滚动条的页面中获取这些值，并且我获得的所有上述代码的值都相同的console.log（$（文件）.WIDTH（），window.outerWidth，window.innerWidth，document.body.scrollWidth，document.body.clientWidth）

输出：1366 1366 1366 1366 1366

我试图找到旧的sharepoint页面的宽度并且它们没有正确设计，即一些表格/图像具有以内联样式指定的巨大宽度，并且它们不包含在其父容器中

我甚至试图找到最大宽度的元素

var maxwidth = 1300;

$("body *").each(function(){
if($(this).width()>maxwidth){
  maxwidth = $(this).width();
}
})
console.log(maxwidth)

但它不可靠。例如，在没有滚动条的页面中，最大宽度为2773，带有滚动条的页面为2000

不知道还能做些什么来获得页面的全宽

Answer 1

您是否正在寻找类似https://jsfiddle.net/kxk5u79n/1/

的内容

$('#button').click(function () {
    var maxWidth = window.innerWidth;

  $('body').children().each(function () {
    var $el = $(this);

    if ($el.width() > maxWidth) {
        $el.css('width', maxWidth);
    }
  });
});

检查窗口宽度，是否宽度更宽，我们调整它以适应。对于边距和填充，这可能不完全准确。

Answer 2

尝试这样的事情：

$('document').ready(function() {
  $(window).scroll(function() {
    console.log($(this).outerWidth() + $(this).scrollLeft())
  })

})

html,
body {
  margin: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="height:100px;width:1600px;background:#b4b4b4"></div>

Answer 3

由于 @Hemant（user：8093451）的回答，我想出了另一个使用Firefox（版本77.0.1 64位）的解决方案：

访问所需网站并将浏览器窗口调整为最小宽度
如果网站的宽度理想，则现在应该可以看到水平滚动条
从 Firefox菜单中选择工具， Web开发人员， Web控制台
在左下方添加以下javascript代码：console.log(this.outerWidth + this.scrollX)
将水平滚动条的栏拖动到最大右侧
通过点击运行或快捷键Ctrl + Enter（ Web控制台必须具有焦点）来运行javascript代码
所需值（出现水平滚动条之前网站的最小宽度）应显示在 Web控制台输出中；例如： 1292 。
最后，通过使用免费的Firefox附加组件，例如 WindowSizer （由 Dr。Cheap 制作），您可以将窗口的宽度设置为所需的值，例如 1292 。此外，您还可以检索窗口的当前大小（不是上面的值，而是可见的宽度）。

我一直在寻找一种将浏览器窗口宽度设置为理想网站宽度的方法，即将显示水平滚动条之前。如果我没记错的话，这是过去浏览器支持的功能，但如今似乎缺乏。感谢您的问题 @Vignesh Subramanian（user：848841）我到了这里。

查找页面的整个宽度，包括水平滚动条

3 个答案: