如何从移动设备中排除 CSS

Question

我的网站主页上有一些 CSS 精灵。将鼠标悬停在元素上时会显示不同的图像。

这在普通桌面上运行良好，但在移动设备（特别是 iPhone 或 iPad）上，悬停状态的元素显示在默认图像下方。

有没有办法我可以说，只在非桌面设备上应用悬停。

我正在查看媒体查询的 max-device-width 属性，但它并没有完全符合我的要求。例如：如果桌面浏览器调整窗口大小，那么悬停将不起作用。

<style media="screen">
#main{
 width: 985px;
 height: 1078px;
 background: url(../images/main.jpg);
 margin: 0px; 
 padding: 0;
 position: relative;
}

#main li {
 margin: 0; 
 padding: 0; 
 list-style: none;
}

#mainSection1 a { left: 642px; width: 193px; top: 282px; height: 18px; position: absolute; }
#mainSection1 a:hover { background: url(../images/main.jpg) -642px -1360px; }

</style>

Answer 1

据我所知，浏览器窗口大小不应触发由 max/min-device-width 条件保护的 CSS。不过，它会触发用 max/min-width 保护的 CSS。但是，您的屏幕分辨率可能会触发您的设备宽度部分。

但这不是您唯一的问题。这是 CSS 中的逻辑像素单位并不总是映射到物理像素数。如果您在视口元标记中将初始比例设置为 1，那么在 800x480 的 Android 手机和 iphone4 上，事情可能看起来比它们应该的要大。

您可以在媒体查询中使用 device-pixel-ratio 来隔离这些设备。我认为 iphone4 的设备像素比是 2。

我知道以上这些都不能为您提供直接的解决方案，但您可以尝试将它们结合起来，找出适合您的方法。