如何解决如何从移动设备中排除CSS
| 我的网站主页上有一些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>
解决方法
据我所知,浏览器窗口大小不应触发受最大/最小设备宽度条件保护的CSS。但是它将触发以最大/最小宽度保护的CSS。但是,您的屏幕分辨率可能会触发设备宽度部分。
但这不是您唯一的问题。 CSS中的逻辑px单位并不总是映射到物理像素数。如果您在视口meta标记中将初始比例设置为1,则在800x480的android手机和iphone4上,事情看起来可能会超出其应有的范围。
您可以在媒体查询中使用device-pixel-ratio来隔离这些设备。我认为iphone4的设备像素比是2。
我知道以上所有这些都不能为您提供直接的解决方案,但是您可以尝试将它们结合起来以找出最适合您的方法。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。