3

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

StackOverflow 的截图

这是网站实际内容两侧的大量空白。

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

StackOverflow 的放大截图

啊……好多了。

我怀疑这是可能的，至少通过一些启发式方法在合理程度上是可能的，因为当我在浏览网页时双击屏幕时，我的 Android 手机似乎做了很多类似的事情。

4

5 回答 5

2

这将做类似的事情。虽然可能会错过各种边缘情况。

// 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% 可靠的解决方案。这是一件棘手的事情，因为有很多方法可以设置网站样式。我敢打赌，像可怕地使用绝对定位这样的疯狂东西可能会成为你屁股上的一根刺。

于 2012-08-01T01:30:02.363 回答
1

如果你使用 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%";
}

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

话虽如此，这个或类似的东西可能工作正常：

var divs = document.getElementsByTagName("div");
for(var i = 0; i < divs.length; i++)
{
    divs[i].style.minWidth = "90%";
}
于 2012-08-01T01:06:53.810 回答
1

哈！我有一些接近的东西（虽然我也会尝试亚历克斯的方法）：

以下依赖于 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);

是时候狗食这只小狗了……

于 2012-08-01T01:40:02.247 回答
0

没有太大的进展，但我把我尝试过的东西放在一边，以防它激励其他人：

效果比你想象的要糟糕得多

制作一个小书签，使 body 的所有子项都具有 100% 的宽度。然后，如果您再次单击小书签，它会使 body 的子项的所有子项具有 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;
}
于 2012-08-01T01:04:30.400 回答
0

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

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

于 2012-08-01T01:22:10.977 回答