4

私はしばらくの間この特定のアイデアを探していましたが、解決策を見つけることができないようです。

基本的に、私はコンテンツの一部が表示されるワードプレスプラグインを使用しており、モバイルデバイスを除いて正常に動作します。

ビューポートが特定の幅に達したときにDIVを非表示にすることで、これを修正しようとしています。

これは私がこれまでに持っているものです：

<script>
jQuery(document).ready(function () {
var screen = $(window)    
if (screen.width() < 800) {
    $("#attentionGrabber").hide();
}
else {
    $("#attentionGrabber").show();
}
});</script>

これは、＃attentionGrabberが私が制御しようとしているdivであることを前提としています。

ビューポートに応じて表示または非表示にするのが最も簡単な方法だと思いますが、そのコードをヘッダーに配置しても何も起こらないようです。

4

2 に答える 2

6

画面のサイズが変更されたときに関数が実行されるように、何らかのイベントにバインドする必要があります。

<script>
jQuery(document).resize(function () {
    var screen = $(window)    
    if (screen.width() < 800) {
        $("#attentionGrabber").hide();
    }
    else {
        $("#attentionGrabber").show();
    }
});
</script>

しかし、実際には、私はこのルートに行きます：

@media screen and (max-width: 799px) {
    #attentionGrabber {display: none}
}

http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

于 2013-03-27T02:11:56.873 に答える
1

スクリプトの前にjquerymをインポートしましたか

 <script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"
type="text/javascript"  >

それで

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

function _resizeTDiv()
{
  ..your code here
}
 _resizeTDiv();

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

});

</script>
于 2013-03-27T02:13:40.043 に答える