1

私のページは次の構造です。

<container>
   <header>
   <main-content>
   <footer>
</container>

javascript次のコードを使用して、コンテナーの幅を調整しています。

function getPageSize() {
            var de = document.documentElement;
            var w = window.innerWidth || self.innerWidth || (de && de.clientWidth) || document.body.clientWidth;
            var h = window.innerHeight || self.innerHeight || (de && de.clientHeight) || document.body.clientHeight;
            arrayPageSize = [w, h];
            return arrayPageSize;
        }
        $(document).ready(function () {
            var page = getPageSize();
            var x = page[0];
            var y = page[1];
            $("#container").css({width: (x) + 'px'});

編集

現在、スライダーを使用しています [adivを幅に設定し、9999emスライダー要素を挿入します]。ブラウザー ウィンドウを最大化すると、ページが適切に開きます。

異なる解像度のデバイスでこれを達成するためのより良い方法はあります(Ctrl)+(-)かscreens? 他のページを表示せずに、ページを真ん中に残すにはどうすればよいですかscreens。

画像は次のとおりです。 ここに画像の説明を入力

私が実験したことの 1 つcontainerは、要素の幅を に設定するとpx、目的の結果が得られることです。ただし、デバイスによって異なるため、事前にcontainer( ) を使用して幅を設定している (の幅を設定することはできません。$(window).width()

4

3 に答える 3

2

どうですか：

width: auto

また

width: 100%

それはあなたのページの最も親のコンテナであるため...

質問に対する編集後: コンテナを左揃えではなく常に「中央」にするには、次を使用できます。

margin: auto

常に中央に配置するcontainer..

于 2012-12-30T09:07:54.503 に答える
2

どうですか：

$(window).resize(function() {
  var pageSize= $(window).width();
   $("#container").css({width: (pageSize) + 'px'}); 
});
于 2012-12-30T09:47:16.113 に答える
0

さまざまなデバイスでこのような問題を解決するレスポンシブ CSS フレームワークのいくつかを確認する必要があります。1 つの例は Bootstrap (現在非常に人気があります) ですが、他にもあります。

とにかく、 Javascript / jQueryで絶対的な制御が必要なときに物事を中心に保つ方法は次のとおりです。

var desiredWith = x;
var pad = ($(window).width() - desiredWidth) / 2;
$(selector).css({position: 'absolute', left: pad, right: pad, width: auto;});

これは古いブラウザーの一部では常に (通常は?) 機能するとは限りませんが、私はそれらを対象としていない会社で働いているため、どれが壊れているかはわかりません。

于 2012-12-30T11:28:31.383 に答える