隐藏基于设备的元素

时间:2014-08-13 15:09:07

标签: android html ios css

我希望只有当用户在移动设备上时才会在我的网站上显示DIV元素。这是一个小型企业网站,我希望有一个链接,允许最终用户直接从网页上调用业务 - 我不需要这个DIV元素出现在网站的桌面版本上。< / p>

我使用以下代码实现了这一目标:

    #callus {display:none}

    @media screen and (max-width: 900px) {
      #callus { display:inline !important; }
    }

    .callnow {
        position: fixed;    
        bottom: 0px;
        left: 0px;
        height: 100px;
        width: 960px;
        background-color: #f90;
    }

然而,经过测试,我意识到现代移动设备通常具有高分辨率,在某些情况下等于可能被认为是正常的&#34;桌面分辨率,因此我正在寻找一种解决方案,只需查找类似&#34;如果操作系统是Windows Phone,iOS或Android,则显示此元素&#34;。

这可能吗?

2 个答案:

答案 0 :(得分:1)

您可以使用modernizr http://modernizr.com/检测不同的功能,例如检测触摸很有用,但它需要Javascript支持。

尽管具有高分辨率屏幕,移动设备仍应与媒体查询一起使用。请确保在标题中包含以下代码

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

这使移动设备能够正确呈现网站,尽管HiDPI

答案 1 :(得分:0)

纯CSS媒体查询无法实现,但您可以添加查询以解决特定设备的问题 - 请查看here

您可以使用JavaScript检测移动浏览器(用户代理)并向正文添加一些类 - 例如mobile-device然后在CSS .mobile-device #callus { display: inline; }中。我在这里找到了很好的解决方案:https://stackoverflow.com/a/11381730/3589528