Обнаружение различных платформ устройств с использованием CSS
Я хотел бы сказать, что я прочитал и попробовал много вариантов инструкций здесь:
http://www.cloudfour.com/ipad-css/Определить iPhone / iPad чисто по CSSОбнаружить браузер Xoom (Android)http://www.w3.org/TR/css3-mediaqueries/http://www.w3schools.com/html5/att_link_media.asphttp://en.wikipedia.org/wiki/List_of_Android_deviceshttp://en.wikipedia.org/wiki/File:Vector_Video_Standards2.svg
Я хотел бы, чтобы моя страница использовала разные CSS-файлы в зависимости от используемого устройства. Я видел много решений для этого, все с использованием некоторой формы выше.
Однако при тестировании на HTC Desire я постоянно получаю либо вывод, предназначенный для iPad, либо полностью нефильтрованный вывод. В настоящее время мой тестовый код основан на:
http://www.cloudfour.com/ipad-css/
Вот мой HTML-файл:
<html>
<head>
<title>orientation and device detection in css3</title>
<link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:landscape)" href="iphone-landscape.css" />
<link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:portrait)" href="iphone-portrait.css" />
<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)" href="ipad-landscape.css" />
<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait)" href="ipad-portrait.css" />
<link rel="stylesheet" media="all and (device-width: 480px) and (device-height: 800px) and (orientation:landscape)" href="htcdesire-landscape.css" />
<link rel="stylesheet" media="all and (device-width: 480px) and (device-height: 800px) and (orientation:portrait)" href="htcdesire-portrait.css" />
<link rel="stylesheet" media="all and (min-device-width: 1025px)" href="desktop.css" />
</head>
<body>
<div id="iphonelandscape">iphone landscape</div>
<div id="iphoneportrait">iphone portrait</div>
<div id="ipadlandscape">ipad landscape</div>
<div id="ipadportrait">ipad portrait</div>
<div id="htcdesirelandscape">htc desire landscape</div>
<div id="htcdesireportrait">htc desire portrait</div>
<div id="desktop">desktop</div>
</body>
</html>
А вот и файл CSS CSS для iPad (здесь я приведу только его, поскольку все они в основном одинаковы):
div
{
display: none;
}
#ipadlandscape
{
display: inline;
}
Я хотел бы знать, какие изменения необходимо внести в элементы ссылки, чтобы гарантировать, что ipad получает только свои таблицы стилей, iphone получает свои собственные и (в данном случае) htc desire (или устройства с таким же разрешением / аспектом) получают эту таблицу стилей.