javascript - 有什么好的方法可以确定网页的 "actual content width"吗？

Question

这是 StackOverflow 在我的(巨大)工作监视器上的样子:

网站实际内容的两侧有很多空白。

我知道大部分网站都是这样设计的——所以我在这里没有特别指出——但这正是我问这个问题的原因。我在想，如果我有一些可靠的方法(比如通过 JavaScript)来确定网站的“实际”宽度，那会非常好，然后我可以用它来编写一个快速脚本，自动扩展我的任何网站'浏览以填充我的显示器上的可用宽度。事实上，我觉得有些荒谬，有时我在阅读小文本之前仍然会眯着眼睛，然后才意识到/记住放大以利用我的大屏幕。

啊……好多了。

我怀疑这是可能的，至少通过一些试探法可以达到合理的程度，因为当我在浏览网页时双击屏幕时，我的 Android 手机似乎会做很多类似的事情.

Answer 1

这会做一些类似的事情。尽管可能会遗漏各种边缘情况。

// Assuming jQuery for simplicity
var drillIn = function(node) {
  var max = 0;
  var windowWidth = $(window).width();
  var result = 0;

  $(node).children().each(function() {
    var $this = $(this);
    if ($this.width() > max) {
      max = $this.width();
    }
  });

  if (0 < max && max < windowWidth) {
    return max;
  } else {
    $(node).children().each(function() {
      var childMax = drillIn(this);
      if (childMax > result) {
        result = childMax;
      }
    });
    return result;
  }
};

drillIn(document.body);

工作 fiddle :http://jsfiddle.net/bdL5b/1/

在 SO 上，我得到 960，这是正确的。基本上，它深入 DOM 树以找到最接近根的最宽节点，该节点不是 0 或窗口宽度。因为通常，靠近根节点的地方有一个容器节点，用于保存站点内容。通常。

但不确定您是否会获得 100% 可靠的解决方案。这是一件棘手的事情，因为有很多方法可以设计网站的样式。我敢打赌，像可怕地使用绝对定位这样疯狂的东西可能会成为你的屁股上的一个严重刺痛。