У меня проблемы с "условным" CSS для устройств iOS. Вот источник, который у меня сейчас есть ... обратите внимание на две связанные таблицы стилей. Если не ясно, я хочу использовать файл mobile.css, если это устройство iPhone / iPod Touch, и style.css в противном случае. Я получаю странные случаи, когда некоторые части тегов CSS извлекаются из одного файла CSS, а другие теги - из другого.
Например, я хочу, чтобы в зависимости от платформы отображался другой заголовок. У меня есть раздел #header {} в mobile.css и раздел #header {} в style.css, оба из которых имеют свои собственные фоновые изображения. На немобильном устройстве все работает хорошо, но когда я загружаю страницу на свой 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;
}