0

我的网站有 2 种不同的样式表，一种用于台式机，另一种用于:hover禁用所有功能的手机和平板电脑。我尝试使用引导媒体查询定义，但桌面会在某些高端手机上显示，我该如何解决？

这是我现在的定义：

<!-- IPHONE 4-->
   <link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="/styles-basic.css" />
<!-- IPHONE 5-->
   <link rel="stylesheet" media="screen and (device-aspect-ratio: 40/71)" type="text/css" href="/styles-basic.css" />
<!-- PHONES E TABLETS -->
   <link rel="stylesheet" href="/styles-basic.css" media="screen and (max-width:979px)">
<!-- DESKTOP -->
   <link rel="stylesheet" href="/styles.css" media="screen and (min-width:978px)">
4

1 回答 1

2

首先，您的 iPhone 4/5 媒体查询还将包括许多其他具有这些像素比率的手机。其次，对于不支持媒体查询的浏览器或那些窗口 < 978px 的浏览器，将加载什么样式表？

处理这个问题的根源（：触摸设备的悬停规则）的最佳方法是只为每个浏览器提供一个样式表，并将悬停规则隐藏在功能检测之后，例如Modernizr。获取 Modernizr并将其包含在您的<head>. 正确加载后，将 :hover css 规则放在.no-touchCSS 后面，它只适用于那些没有触摸屏的浏览器。

于 2013-06-06T16:12:40.157 回答