android - 隐藏基于设备的元素

Question

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

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

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

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

这可能吗？

Answer 1

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

尽管具有高分辨率屏幕的移动设备仍应支持媒体查询。确保标题中包含以下代码

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

这会将移动设备设置为在 HiDPI 下正确呈现网站