0

サイトをレスポンシブにするためのプラグインを作成しています。最初のステップは、フェイルセーフを作成して、物事が想定どおりに見えるようにすることです。

ページの読み込み時に、最大ウィンドウサイズで要素の幅を取得したいと思います。現在、私はこれを行うだけです：

var theElements = ['div', 
                'section',
                'table',
                'article',
                'aside',
                'details',
                'figcaption',
                'figure',
                'footer',
                'header',
                'hgroup',
                'nav',
                'section',
                'summary'];


for (var i=0; i<theElements.length; i++){

    $(theElements[i]).each(function(){
        var theWidth = $(this).width();
        $(this).css('max-width', theWidth + "px"); 
    });
}

これはかなりうまく機能しますが、ページの読み込み時にウィンドウサイズで要素の幅を取得するだけです。したがって、ウィンドウが500pxしかない場合は、それが私が固執しているコンテナサイズです。

やりたいこと

簡単に言うと、ページがどのように表示されるのか、どのように表示されるように設計されているのかを把握しようとしています。サイトの設計者がマージン、具体的なピクセル値、またはパーセンテージを使用してサイトをコーディングしたかどうかを知る方法はありません。したがって、最も簡単な方法は、ウィンドウを「うん、そういう風に見える」と言うのに十分な大きさにすることです。

ウィンドウの幅をたとえば1280pxにすばやく設定し、幅を計算theElementsしてから元の状態に戻す（ユーザーの邪魔になるため、これは適切なオプションではありません）か、その他の方法を見つけたいと思います。本体の幅が1280pxの場合、要素の幅を計算します（UXははるかに優れていますが、可能かどうかはわかりません）。

これを達成するための最良の方法は何ですか？

4

2 に答える 2

1

bodyの幅 (または、それを禁止する場合は要素の幅) を 1280 に設定<html>し、すべての幅を計算してから、auto に戻すことができます。JS が中断なく実行されている限り、ブラウザーは何も再描画しません。

私が見ることができる他の唯一のオプションは、ドキュメント全体を固定幅の非表示要素に複製してから、すべて破棄することです。ただし、それはかなり高価です。

于 2013-01-23T20:46:23.870 に答える
0

要素の最大幅を要素の幅に設定している理由は完全にはわかりませんが、これにより、画面サイズの変更に反応するはずです。

$(window).on("resize", function(){
  for(var i = 0, n; n = theElements[i]; ++i){
    $(n).each(function(){
       $(this).css({"max-width" : $(this).width() + "px"};
   })
  }
})
于 2013-01-23T20:44:33.027 に答える