0

ビューポートが (たとえば :) 367px; のように小さい場合、モバイル ナビゲーションを表示する必要があります。メディア ビューポートを使用したくない (それも使用しますが、古い IE などの js でこれを修正する必要があります)。

ソリューション：

<script type="text/javascript"> 
 $(window).resize(function() {

    if ($(window).width() < 767) {
        $(".nav-mob").show();
        $(".nav-wide").hide();
    }
    else {
        $(".nav-wide").show();
        $(".nav-mob").hide();
    }
});
</script>

<style>
.nav-mob ul {display: none;}
.nav-mob{display: none;}
.nav-wide{display:block;}

@media screen and (max-width: 767px) {
.nav-wide {display: none!important;}
.nav-mob {display: block!important;}
}
</style>

間違ったもの：

jQuery(document).resize(function () {
    var screen = $(window)    
    if (screen.width < 367) {
        $(".nav-mob").hide();
        $(".nav").show();
    }
    else {
        $(".nav").hide();
        $(".nav-mob").show();
    }
});


<div class="nav-mob" style="display:none; height:50px; width:200px; padding:30px; background:#f0c; margin:200px; position:absolute;">mobile</div>

<div class="nav" style="height:100px; width:300px; padding:30px; background:#cfc; margin:20px; position:absolute;">wide</div>

フィドルを確認してください: http://jsfiddle.net/fvt8T/

4

1 に答える 1

1

これは私のために働く：

 $(window).resize(function() {

    if ($(window).width() < 367) {
        $(".nav-mob").hide();
        $(".nav").show();
    }
    else {
        $(".nav").hide();
        $(".nav-mob").show();
    }
});
于 2013-06-05T14:47:05.800 に答える