顯示：無 - 顯示在手機上，但不顯示在桌面上

我正在嘗試使用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; 
    } 
}

來源

2012-08-16 jhome

您可以在媒體查詢中將其設置爲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>

來源

2012-08-16 23:43:25

顯示：無 - 顯示在手機上，但不顯示在桌面上

回答

相關問題