1

要素が小さい解像度 (またはモバイル デバイス) に表示されるように使用しようとしていますdisplay: noneが、大きな画面サイズのメイン css には表示されません。

表示されないのはおそらく論理的だと思いますが、これを回避する方法がわかりません。

footer {
    display: none;
}

@media handheld and (max-width:480px),
screen and (max-device-width: 480px),
screen and (max-width: 600px)
{
  footer {
    background-color: #colour;
    position:fixed;
    bottom: 0;
    left: 0;
    right: 0;
  }
}
4

1 に答える 1

0

display:blockメディアクエリ内で設定できます。これにより、display:none; がオーバーライドされます。

もう 1 つの方法は、次のような jQuery/Javascript ソリューションです。 注: これは、ブラウザの互換性と使いやすさに簡単に役立つため、このような作業に適したjQueryライブラリを使用しています。

<script type="text/javascript">
$(document).ready(function (){
    if( navigator.userAgent.match(/Android/i) ||
     navigator.userAgent.match(/webOS/i) ||
     navigator.userAgent.match(/iPhone/i) ||
     navigator.userAgent.match(/iPod/i) ||
     navigator.userAgent.match(/BlackBerry/)
     ){
    $(.footer).css("display:none")  
    } else {

        $('.footer').css("display:block")
        });
    }
});
</script>
于 2012-08-16T23:43:25.880 に答える