Question

我希望只有当用户在移动设备上时才会在我的网站上显示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;。

这可能吗？

Answer 1

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

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

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

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

Answer 2

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

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

隐藏基于设备的元素

2 个答案: