1

ナビゲーション メニューをモバイル デバイス (iphone/ipad) に合わせるのに少し問題があります。ここをクリックし て、css プロパティを次のように設定しました。

    #wrapper{
    max-width: 1600px;
    min-width: 320px;
    width: 100%;
    margin: 0 auto;
    position: relative;
}
#header{
    max-width: 1018px;
    min-width: 320px;
    width: 100%;
    margin: 0 auto;
} 

#social-tabs{
    display: block;
    padding: 4px;
    margin: 5px 0px;
}

#nav-menu{
    margin: 0 auto;
    width: 100%;
    max-width: 1018px;
    min-width: 320px;
}

私は自分のサイトに画面サイズ変更も適用しましたが、まだ満足していません..

 function reSize($target){
 $target.css('width', $(window).width()+'px');
}
$(document).ready(function(){
    $(window).bind('resize', reSize($('#header')));
    $(window).trigger('resize');
});

私が間違っているところを拾うことができる人はいますか?

4

1 に答える 1

1

サイズ変更ハンドラーをバインドしようとすると、間違っています。

$(window).bind('resize', resize.bind(window, $('#header')));

物事を改善します。書かれたコードは「サイズ変更」関数と呼ばれます。あなたがする必要があるのは、関数への参照を渡すことです。別の (おそらくもっと単純な) 同等のものは次のようになります。

$(window).bind('resize', function() { resize( $('#header') ); });

そうは言っても、あなたはまだ問題を抱えているでしょう。とにかくサイズ変更が行われないため、「サイズ変更」イベントの処理はモバイル デバイスでは役に立ちません。本当に必要なことは、 CSS Media Queriesを調査し、ソリューションを JavaScript ではなく CSS に基づいて構築することです。

(ブラウザ ウィンドウが対話的にサイズ変更されるため、デスクトップ ブラウザでは「サイズ変更」イベントが非常に迅速に発生することに注意することも重要です。明らかに、電話またはタブレットを横向きにすると、1 つのイベントのみが発生しますが、デスクトップ/ラップトップ コンピューターでは、ウィンドウ コーナー ウィジェットがドラッグされている間、ブラウザーは無数の「サイズ変更」イベントを発生させるため、DOM を更新する JavaScript ハンドラーはかなり深刻に行き詰まる傾向があります)。

于 2012-08-24T21:19:55.527 に答える