3

私の（巨大な）作業モニターでStackOverflowがどのように見えるかを次に示します。

StackOverflow のスクリーンショット

これは、サイトの実際のコンテンツの両側にある大量の余白です。

これは、Web サイトの大部分がこのように設計されていることを理解しています。したがって、ここで SO を選び出すつもりはありません。Web サイトの「実際の」幅を特定する信頼できる方法 (たとえば、JavaScript を使用) があれば、それがあれば本当にいいと思います。モニターで使用可能な幅を埋めるためにブラウジングしています。現状では、巨大な画面を利用するためにズームインすることに気付く/覚える前に、小さなテキストを読む前に目を細めることがあるのはばかげていると思います.

StackOverflow の拡大スクリーンショット

ああ…もっといい。

Web の閲覧中に画面をダブルタップすると、私の 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％信頼できるソリューションが得られるかどうかはわかりません。Web サイトのスタイルを設定する方法は無数にあるため、これは注意が必要です。絶対位置のひどい使用のようなクレイジーなことは、あなたのお尻の深刻なとげになる可能性があるに違いありません。

于 2012-08-01T01:30:02.363 に答える
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 に答える
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%";
}

これを任意に行うためのヒューリスティックに関する限り、サイトの外観を大幅に台無しにすることなく、公平な方法ですべての Web ページに対して行う良い方法はおそらくないでしょう。

そうは言っても、これまたは同様のものがうまくいくかもしれません：

var divs = document.getElementsByTagName("div");
for(var i = 0; i < divs.length; i++)
{
    divs[i].style.minWidth = "90%";
}
于 2012-08-01T01:06:53.810 に答える
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 に答える
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 に答える