显示:无-在移动设备上显示，但不在桌面上显示 [英] Display: none - Show on the mobile, but not on the desktop

问题描述

我正在尝试使用display: none，以便在较大的屏幕尺寸下，元素将以较小的分辨率(或移动设备)显示，但不会在主CSS上显示.

I am attempting to use display: none so an element will show up on a smaller resolution (or a mobile device) but not on the main css for larger screen sizes.

我认为它不显示可能是合乎逻辑的，但我想不出一种解决此问题的方法.

I think it is probably logical that it doesn't show but I can't figure out a way to get around this.

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

推荐答案

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

You can set it to display:block within your media query, this will override the display:none;

另一个方法是jQuery/Javascript解决方案，可能是这样的: 注意:这使用了 jQuery 库，该库可很好地用于此类事情，因为它很容易对浏览器有所帮助兼容性和易用性.

Another method would be a jQuery/Javascript solution, potentially something like this: Notes: This is using the jQuery library which is nice to work with for things such as this, as it easily helps with browser comptability and ease of use.

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

这篇关于显示:无-在移动设备上显示，但不在桌面上显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！