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