jquery - jqueryで特定の幅のdivを削除する

Question

私はモバイル用のWebページのかなり異なるバージョンを作成しようとしていますが、そのためには、ブラウザーのウィンドウ幅が767pxよりも大きい場合に特定のdivが消える必要があります。私は次のようなjQueryでそれをやろうとしていました：

<script>
if ( $('body').width > 767px ) {
    $('.mobile').remove();
}
</script>

しかし、それはまったく機能しません。

大きいバージョンで非表示にしたいdivには、クラスがあり.mobileます。

score 3 · Accepted Answer

そのために必ずしもJSは必要ありません。メディアクエリを見たことがありますか？

@media only screen and (min-width: 767px) {
    .mobile { display: none }    
}

それでもjQueryを使用したい場合：

if ( $('body').width > 767 ) {
    $('.mobile').css('display', 'none');
}

score 1 · Accepted Answer

代わりに、メディアクエリを使用してみてください。http://cssmediaqueries.com/を見てください

score 0 · Accepted Answer

.width()はピクセル値を返すので、767をチェックする必要があります

メディアクエリを使用することもできますが、ブラウザのサポートを検討する必要があります：http: //caniuse.com/css-mediaqueries

score 0 · Accepted Answer

@media screen and (min-device-width: 767px) {
  .mobile {display:none;}
}

また

$('.mobile').toggle(parseInt($('body').width())>767);

4 に答える 4