3

初めての「プログレッシブ エンハンスメント」サイトを試みていますが、jQuery の追加とブラウザのサイズ変更について質問があります。基本的に、読み込まれるデフォルトのサイトがモバイル バージョンになるように設定し、ブラウザの幅が最小 1100px の場合、ページの div にデスクトップ要素を追加する jQuery 関数を用意しました。

それはうまく機能しますが、今はサイズ変更の問題に取り組む必要があります。現在、ブラウザー ウィンドウのサイズを 1100px 未満に変更しても、div に追加された要素はブラウザーを更新するまで消えません。ブラウザ ウィンドウのサイズを 1100px 未満に変更すると、追加された要素が更新せずに消えるようにしたいと考えています。

誰かが私を正しい方向に向けることができますか? ありがとう！

HTML:

<div id="section1">

</div>

Javascript:

if (window.matchMedia("(min-width: 1100px)").matches) {
    $("#section1").append("\
        <div class='placeholder'>\
            <img src='assets/site/desktop_placeholder.png' />\
        </div>\
    ");
}
4

1 に答える 1

0

私はそれを少しいじっていて、近づいていると思います。これを行うためのより良い方法がある場合、またはこのコードに問題がある場合はお知らせください。ありがとう！

function appendElements() {
    //swap in desktop content
    if (window.matchMedia("(min-width: 1100px)").matches) {
        $("#section1").append("\
            <div class='placeholder'>\
                <img src='assets/site/desktop_placeholder.png' />\
            </div>\
        ");
    }
    }else{
        $("#section1").empty();
    }
}

if (window.matchMedia("(min-width: 1100px)").matches) {
    appendElements();
}

$(window).resize(function(){
    appendElements();    
});
于 2013-11-18T21:58:54.233 に答える