3

ユーザーの画面解像度を自動的に検出するフローティング div を実装しようとしています。解像度が 1280 未満の場合、特定の div が自動的に非表示になります。

これとこれを読んで、それらのコードを使用しようとしましたが、うまくいきません。私はワードプレスを使用しており、jsコードを</header>

ヘッダーに貼り付けたコード:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function () {

    var screen = $(window)    

    if (screen.width < 1280) {
        $("#floatdiv").hide();
    }
    else {

        $("#floatdiv").show();
    }

});

//run on document load and on window resize
$(document).ready(function () {
    //on load
    hideDiv();
    //on resize
    $(window).resize(function(){
        hideDiv();
    });
}); 
</script>

残念ながら、私はそれを機能させることはできません。ここで何が問題になっているようですか？

4

4 に答える 4

3

CSS メディア クエリを使用するのはどうでしょうか。1280px よりも狭い画面に一致するものを追加display: none;して、div に設定できます。

@media (max-width: 1280px) {
    #floatdiv {
       display: none;
       /* or, to just hide the contents but leave it in the layout of the page: */
       visibility: hidden;
   }
}
于 2012-09-23T10:55:56.157 に答える
3

「screen.width」を「window.innerWidth」に置き換えます

于 2012-09-23T11:02:03.397 に答える
1

古いブラウザー (Internet Explorer) を気にしない場合、これを行う最も簡単な方法は、JavaScript ではなくCSS3 Media Queriesです。

ブラウザの互換性に関する詳細は、こちら. Ivan Vergilievに感謝します。

 @media (max-width: 1280px) {
   #floatdiv {
     display: none;
   }
 }

これは、画面の幅が 1280px より小さい場合にのみ CSS が適用されることを意味します。

編集済み

于 2012-09-23T10:57:57.257 に答える
0

で画面幅を取得できますscreen.availWidth 

 $("#floatdiv").show();

 while(screen.availWidth < 1280){
      $("#floatdiv").hide();

 }
于 2012-09-23T10:58:13.663 に答える