无法让 iOS 设备的条件 CSS 正常工作答案

【问题标题】：Trouble getting Conditional CSS for iOS devices to work无法让 iOS 设备的条件 CSS 正常工作
【发布时间】：2011-04-14 20:44:35
【问题描述】：

我在使用 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>

style.css

#header {
    background-image: url('../images/casmlogo.png');
    background-repeat: no-repeat;
    height: 200px;
    margin-left: 20px;  

}

mobile.css

#header {
    background-image: url('../images/logo-apple.png');
    background-repeat: no-repeat;
    height: 100px;
}

【问题讨论】：

你能发布#header的CSS吗？

标签： ios css formatting mobile-safari mobile-website

【解决方案1】：

在这种情况下，iOS 设备将同时加载这两个样式表。只需将 mobile.css 链接放在普通 style.css 下方，事情就会好很多。然后 mobile.css 中的规则将覆盖 style.css 中的规则

【讨论】：