Trouble getting Conditional CSS for iOS devices to work
I'm having some trouble with "conditional" CSS for iOS devices. Here is the source I currently have... take note of the two linked stylesheet开发者_如何学运维s. 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;
}
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
加载中,请稍侯......
精彩评论