如何从移动设备中排除 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

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

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

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

我知道以上内容本身都没有为您提供直接的解决方案，但您可以尝试将它们结合起来，找出适合您的解决方案。