Обнаружение различных платформ устройств с использованием CSS - PullRequest
Новая
       35

Обнаружение различных платформ устройств с использованием CSS

14 голосов
/ 07 ноября 2011

Я хотел бы сказать, что я прочитал и перепробовал множество вариантов инструкций здесь:

Я бы хотел, чтобы на моей странице использовались разные 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 для iPad с альбомной ориентацией (здесь я приведу только это, поскольку все они в основном одинаковы: 

div
{
    display: none;
}

#ipadlandscape
{
    display: inline;
}

Я хотел бы знать, какие изменения необходимо внести в элементы ссылки, чтобы гарантировать, что ipad получает только свои таблицы стилей, iphone получает свои собственные и (в данном случае) htc desire (или устройства с тем же разрешением / аспектом), которые получают таблица стилей.

1 Ответ

25 голосов
/ 07 ноября 2011

Что ж, после некоторой (гораздо большей) игры и добавления некоторого javascript, у меня есть решение - устройство droid не использует разрешение, которое, как я считаю, было: 

<html>
<head>
    <title>orientation and device detection in css3</title>

    <link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:portrait)" href="iphone-portrait.css" />
    <link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:landscape)" href="iphone-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: 768px) and (device-height: 1024px) and (orientation:landscape)" href="ipad-landscape.css" />
    <link rel="stylesheet" media="all and (device-width: 800px) and (device-height: 1184px) and (orientation:portrait)" href="htcdesire-portrait.css" />
    <link rel="stylesheet" media="all and (device-width: 800px) and (device-height: 390px) and (orientation:landscape)" href="htcdesire-landscape.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>
    <script type="text/javascript">
        function res() { document.write(screen.width + ', ' + screen.height); }
        res();
    </script>
</body>
</html>
...