显示：无 - 在移动设备上显示，但在桌面上不显示

【问题标题】：Display: none - Show on the mobile, but not on the desktop显示：无 - 在移动设备上显示，但在桌面上不显示
【发布时间】：2012-08-16 23:35:13
【问题描述】：

我正在尝试使用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;
  }
}

【问题讨论】：

标签： html css mobile desktop

【解决方案1】：

您可以在媒体查询中将其设置为display:block，这将覆盖显示：无；

另一种方法是 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>

【讨论】：