iOS 设备的条件 CSS 无法正常工作
我在使用 iOS 设备的“条件”CSS 时遇到了一些问题。这是我目前拥有的来源...记下两个链接的样式表。如果不清楚，如果是 iPhone/iPod Touch 设备，我希望使用 mobile.css 文件，否则我希望使用 style.css 文件。我遇到了奇怪的情况，其中 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;
}
I'm having some trouble with "conditional" CSS for iOS devices. Here is the source I currently have... take note of the two linked stylesheets. If it's not clear, I want the mobile.css file used if it's an iPhone/iPod Touch device and style.css otherwise. I'm getting weird instances where some portions of CSS tags are being pulled from one CSS file and other tags from another.
For example, I want a different header displayed depending on which platform. I have a #header{} section in mobile.css and a #header{} section in style.css both of which have their own background-images. Things work fine on a non-mobile device, but when I load the page on my iPod Touch, I get the image from the style.css but with the width/height from mobile.css (thus crops/cuts off the image). What could I be doing wrong? Both CSS files validated fine.
Thanks in advance! (in case it's of any relevance, this is all through 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;
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
在这种情况下，iOS 设备将加载两个样式表。
只需将 mobile.css 链接放在普通的 style.css 下方，事情就会好很多。
mobile.css 中的规则将覆盖 style.css 中的规则
An iOS device will load both stylesheets in this case.
Just put the mobile.css link beneath the normal style.css and thing will be a lot better.
The rules in mobile.css will then override the rules from style.css