css - CSS を使用してさまざまなデバイスプラットフォームを検出する

Question

私はここの指示の多くのバリエーションを読んで試したことを言いたいです:

使用しているデバイスに応じてページで異なる 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>

そして、これが iPad のランドスケープ CSS ファイルです (基本的にはすべて同じなので、ここではそれのみを提供します。

div
{
    display: none;
}

#ipadlandscape
{
    display: inline;
}

ipadがスタイルシートのみを取得し、iphoneが独自のものを取得し、（この場合）htcの欲求（または同じ解像度/アスペクトデバイス）がそのスタイルシートを取得するように、リンク要素にどのような変更を加えるかを知りたい.

score 28 · Accepted Answer

まあ、いくつか（はるかに）遊んで、いくつかのJavaScriptを追加した後、私は解決策を手に入れました-ドロイドデバイスは、私が信じていた解像度を使用していませんでした：

<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>

css - CSS を使用してさまざまなデバイス プラットフォームを検出する

1 に答える 1

Related

Reference

css - CSS を使用してさまざまなデバイスプラットフォームを検出する