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。它会触发CSS保护最大/最小宽度。但是，您的屏幕分辨率可能会触发设备宽度部分。

但这不是你唯一的问题。这就是CSS中的逻辑px单元并不总是映射到物理像素数。如果您在视口元标记中将初始比例设置为1，则在800x480安卓手机和iphone4上，这些东西可能看起来比它们应该更大。

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

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

如何从移动设备中排除CSS

1 个答案: