Question

这就是StackOverflow在我（巨大的）工作监视器上的样子：

Screenshot of StackOverflow

在网站的实际内容的任何一侧很多空格。

我知道这是一个非常大比例的网站设计 - 所以我不是在这里挑出SO - 但这正是我问这个问题的原因。我认为如果我有一些确定网站“实际”宽度的可靠方式（比如通过JavaScript）会很好，我可以用它来编写一个快速脚本来自动扩展任何网站我我正在浏览以填充显示器上的可用宽度。事实上，我觉得有些荒谬的是，在实现/记住放大以利用我的巨大屏幕之前，有时候我仍然会在阅读微小文本之前眯眼。

Zoomed-in screenshot of StackOverflow

啊......好多了。

我怀疑这是可能的，至少在合理的程度上通过一些启发式方式，因为当我在浏览网页时双击屏幕时，我的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);

工作小提琴：http://jsfiddle.net/bdL5b/1/

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

不确定您是否会获得100％可靠的解决方案。这是一个棘手的事情，因为有一些方法来设置网站的风格。我打赌疯狂的东西，如绝对定位的可怕使用可能是你屁股的严重刺。

Answer 2

如果您使用Firefox，Greasemonkey非常棒。它将运行您在任何页面上编写的Javascript（我之前在Stack Overflow的网站上使用过它）。

只需使用浏览器的内置“检查元素”来获取您要扩展的内容的ID并执行此操作：

document.getElementById("content").style.width = "100%";  // content is just an example

我认为中间框的类名是.container所以你可以这样做：

var boxes = document.getElementsByClassName("container");
for(var i = 0; i < boxes.length; i++)
{
    boxes[i].style.width = "100%";
}

对于任意执行此操作的启发式方法，可能没有好办法以无偏见的方式对所有网页执行此操作，而不会显着破坏网站的外观。

话虽这么说，这个或类似的东西可能会起作用 ok ：

var divs = document.getElementsByTagName("div");
for(var i = 0; i < divs.length; i++)
{
    divs[i].style.minWidth = "90%";
}

Answer 3

哈！我已经接近了（虽然我也会尝试Alex's approach）：

以下内容依赖于jQuery并且可能效率低下（我相信，它会检查DOM中的每个元素）;但它在我的机器上不需要任何时间，至少可以使用SO：

(function($) {
  function text($element) {
    return $.trim($element.clone().children().remove().end().text());
  }

  function hasContent($element) {
    return $element.is(":visible") && text($element).length > 0;
  }

  function getExtremeEdges($elements) {
    var extremeLeft = null;
    var extremeRight = null;

    $.each($elements, function(i, el) {
      var $element = $(el);
      var offset = $element.offset();

      if (!extremeLeft || offset.left < extremeLeft) {
        extremeLeft = offset.left;
      }
      if (!extremeRight || (offset.left + $element.width()) > extremeRight) {
        extremeRight = offset.left + $element.width();
      }
    });

    return [extremeLeft, extremeRight];
  }

  var $elementsWithContent = $("*").filter(function(i, el) {
    return hasContent($(el));
  });

  var extremeEdges = getExtremeEdges($elementsWithContent);

  var width = extremeEdges[1] - extremeEdges[0];

  var desiredWidth = $(document).width() * 0.95;

  if (width < desiredWidth) {
    $("body").css("zoom", (desiredWidth / width));
  }

}(jQuery));

缩小（用作书签）：

(function(a){function b(b){return a.trim(b.clone().children().remove().end().text())}function c(a){return a.is(":visible")&&b(a).length>0}function d(b){var c=null;var d=null;a.each(b,function(b,e){var f=a(e);var g=f.offset();if(!c||g.left<c){c=g.left}if(!d||g.left+f.width()>d){d=g.left+f.width()}});return[c,d]}var e=a("*").filter(function(b,d){return c(a(d))});var f=d(e);var g=f[1]-f[0];var h=a(document).width()*.95;if(g<h){a("body").css("zoom",h/g)}})(jQuery);

暂时养一只这只小狗的时间......

Answer 4

没有多大进展，但我正在尝试我尝试过的东西，以防它激励其他人：

比你想象的要糟糕得多

制作一个书签，让身体的所有孩子都有100％的宽度。然后，如果再次单击书签，则会使身体儿童的所有孩子都有100％的宽度。这样，用户只需点击一下，直到网站变得更加令人愉悦：）

var levels = levels ? levels + 1 : 1;
$('body *:nth-child(' + levels + ')').css({ width: '100%' });

首先尝试找出第一个有意义的内容

的方法

很酷的谜题，我正在使用jQuery的超棒。所以我通过尝试找到第一个非空.contents()而不是.children()的元素来接近它，因为内容也提取文本节点。这是我到目前为止所拥有的。它很接近，但不太正确，因为它似乎搜索得太深了：

$('body *:visible').filter(function(){
    return moreNonEmptyContentThanChildren($(this));
}).first();


function moreNonEmptyContentThanChildren(el) {
    var contentCount = 0;
    var contents = el.contents();
    for (c = 0; c < contents.length; c++) {
        elc = contents[c];
        if (elc.nodeType != 3 || (elc.nodeType == 3 && $.trim($(elc).text()) != '')) {
            contentCount ++;
        }
    }
    return contentCount != el.children().length;
}

Answer 5

我认为每个网站都会有太大的不同，因为标准是自动调整其内容的大小。我相信CSS是关键，通过使用用户定义的样式表。或类似Stylish之类的东西。见https://superuser.com/questions/128666/custom-per-site-stylesheet-extension-for-firefox

或https://addons.mozilla.org/en-us/firefox/addon/style-sheet-chooser-ii/

有没有什么好方法可以确定网页的“实际内容宽度”？

5 个答案: