我在 iOS 设备的“条件”CSS 方面遇到了一些麻烦。这是我目前拥有的资源...请注意两个链接的样式表。如果不清楚，如果它是 iPhone/iPod Touch 设备，我希望使用 mobile.css 文件，否则使用 style.css。我遇到一些奇怪的情况，其中 CSS 标签的某些部分是从一个 CSS 文件中提取的，而其他标签是从另一个文件中提取的。
例如，我希望根据平台显示不同的标题。我在 mobile.css 中有一个#header{} 部分，在 style.css 中有一个#header{} 部分，它们都有自己的背景图像。在非移动设备上一切正常，但当我在 iPod Touch 上加载页面时，我从 style.css 获取图像，但宽度/高度来自 mobile.css(因此裁剪/剪切图像)。我做错了什么？两个 CSS 文件都经过验证。
提前致谢! (如果它有任何相关性，这都是通过 Grails 实现的)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Home</title>
<link rel="stylesheet" href="/css/mobile.css" type="text/css" media="only screen and (max-device-width: 480px)" >
<link rel="stylesheet" href="/css/style.css" >
<meta name="layout" content="main">
</head>
<body>
<div id="header"></div>
<p>Test</p>
<body>
</html>
样式.css
#header {
background-image: url('../images/casmlogo.png');
background-repeat: no-repeat;
height: 200px;
margin-left: 20px;
}
移动.css
#header {
background-image: url('../images/logo-apple.png');
background-repeat: no-repeat;
height: 100px;
}
最佳答案
在这种情况下，iOS 设备将加载这两个样式表。 只需将 mobile.css 链接放在普通 style.css 下方，事情就会好很多。 mobile.css 中的规则将覆盖 style.css 中的规则
关于ios - 无法使 iOS 设备的条件 CSS 正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5669445/