web-dev-qa-db-ja.com

画面が特定の幅よりも小さい場合はdivを非表示にします

ユーザー画面が1024px未満の場合、ブログのコンテンツ領域にオーバーレイするため、フローティングdivを非表示にしたいと思います。ネット上でこのjQueryを見つけましたが、使用方法がわかりません。

$(document).ready(function() {

if ((screen.width>1024)) {
    // if screen size is 1025px wide or larger
    $(".yourClass").css('display', 'none'); // you can also use $(".yourClass").hide();
}
elseif ((screen.width<=1024))  {
    // if screen size width is less than 1024px
    $(".yourClass").css('display', 'block'); // here you can also use show();
}
});

フローティングdivクラス名がsharecontentの場合、上記のスクリプトを次のように置き換える必要がありますか？はいの場合、機能していません。

$(document).ready(function() {

if ((screen.width>1024)) {
    // if screen size is 1025px wide or larger
    $(".sharecontent").css('display', 'none'); // you can also use $(".yourClass").hide();
}
elseif ((screen.width<=1024))  {
    // if screen size width is less than 1024px
    $(".sharecontent").css('display', 'block'); // here you can also use show();
}
});

また、screen.widthをwindow.widthに置き換えようとしましたが、まだ成功していません:(

jqueryhideresolutionshow
27
dzul

メディアクエリ を使用します。 CSSコードは次のようになります。

@media screen and (max-width: 1024px) {
    .yourClass {
        display: none !important;
    }
}
80
Eric

私はあなたとほとんど同じ状況にあります。画面の幅が指定した幅よりも小さい場合、divを非表示にする必要があります。これは私が使用したjqueryコードです。

$(window).resize(function() {

  if ($(this).width() < 1024) {

    $('.divIWantedToHide').hide();

  } else {

    $('.divIWantedToHide').show();

    }

});
14
jmespinosa

コードの問題は、else if（スペースに注意してください）であるelseifステートメントにあるようです。

コードを書き直し、これに単純化した：

$(document).ready(function () {

    if (screen.width < 1024) {
        $(".yourClass").hide();
    }
    else {

        $(".yourClass").show();
    }

});
1
peterthegreat

私が抱えていた問題は、cssメディアクエリとJqueryクラッシュのIFステートメントです。両方とも700pxに設定されていましたが、一方が700pxに達したと考える人もいました。

これを回避するために、HTMLの上部（メインコンテナの外側）に空のDivを作成しました

<div id="max-width"></div>

Cssでは、このdivを表示しないように設定しました

 #max-width {
        display: none;
    }

私のJSで関数を作成しました

var hasSwitched = function () {
    var maxWidth = parseInt($('#max-width').css('max-width'), 10);
    return !isNaN(maxWidth);
};

したがって、IFステートメントで（hasSwitched <700）が次のコードを実行するかどうかを言うのではなく、次のことを行いました

if (!hasSwitched()) { Your code

}

else{ your code

}

これにより、CSSはJqueryに700pxに達したときに通知します。したがって、cssとjqueryは両方とも同期されます...ピクセルの違いが数個あるのではありません。絶対に期待を裏切らないことを試してみてください。

これと同じロジックをIE8で機能させるために、Respond.jsプラグインを使用しました（これも間違いなく機能します）。IE8でメディアクエリを使用できます。サポートされていなかったのは、ビューポートの幅とビューポートの高さだけでした。したがって、CSSとJSを一緒に動作させようとする私の理由です。これが皆さんのお役に立てば幸いです

0
Dally S