显示：无 - 显示在手机上，但不显示在桌面上

Question

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

Answer 1

您可以在媒体查询中将其设置为display:block，这将覆盖display：none;

另一种方法是一个jQuery/JavaScript的解决方案，可能是这样的： 注：这是使用jQuery库是好的工作的东西，如这个，因为它很容易与浏览器comptability和易用性的帮助使用。

<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>