jquery window.innerWidthコンテンツの削除と置き換え

Question

私は応答性の高いサイトを構築していますが、ちょうどを望んでいません。小さな画面の場合は要素を非表示にします。を削除して読み込み時間を短縮します。私は、これがあれば仕事をしたい、私はクラス.widescreenだけ広い768px

よりも画面上にロードされるすべての要素に追加され

if (window.innerWidth < 768) { 
    $('.widescreen').remove(); 
} 

で、これまで取り組んでこれを持って

ユーザーは、ブラウザウィンドウのサイズを変更（またはデバイス90°ターン）ので、私はこの試みた：

$(window).resize(function() { 
    //small-screen 
    if (window.innerWidth < 768) { 
     $('.widescreen').remove(); 
    } 
    //end small-screen 
}); 

働くが、ウィンドウのサイズが変更された場合にのみ小さなサイズでロードされていませんが。私はそれが起こるだろうと推測した。

これを実現する方法はありますか？ページを読み込んだときとブラウザウィンドウのサイズを変更したときの両方で動作しますか？

次に、ウィンドウのサイズを768px以上に変更したときに、のコンテンツをバックに追加します。しかし、最初の部分が実際に可能ならば、私はそれを理解しようとします！

Answer 1

$(function() { 
$(window).resize(function() { 
     //small-screen 
     if (window.innerWidth < 768) { 
      $('.widescreen').remove(); 
     } 
     //end small-screen 
    }) .resize(); // trigger resize event 

}) 

Answer 2

なぜ機能上のサイズをチェックするコードを置くのではなく、読み込み時にこの関数を呼び出すか、サイズを変更するときにこの関数を呼び出してください。

function checkSize() { 
    //small-screen 
    if (window.innerWidth < 768) { 
     $('.widescreen').remove(); 
    } 
    //end small-screen 
} 

checkSize(); 

$(window).resize(function() { 
    checkSize(); 
}); 

Answer 3

私はこれらの部分を隠すためにメディアクエリを使用します。

@media all and (max-width: 768px) { 
    .widescreen { display: none; } 
} 

JavaScriptを使用する場合、これはほぼ同じことです。

クライアントはHTMLをダウンロードする必要がありますが、どちらの場合も要素を隠すのではなく、要素を削除するという点はありません。