Question

我的网站有两种不同的样式表，一种用于桌面，另一种用于禁用所有: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)">

Answer 1

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

处理此问题根源的最佳方法（触摸设备的悬停规则）是为每个浏览器提供一个样式表，并将悬停规则隐藏在功能检测背后，如Modernizr。 Get Modernizr并将其包含在<head>中。一旦正确加载，你的CSS中的hover css规则就会隐藏在.no-touch后面，它只适用于那些没有触摸屏的浏览器。

媒体查询样式表

1 个答案: