CSS @media クエリで iPhone および Android ブラウザをターゲットにする方法

CSS @media handheld iPhone および Android ブラウザのサポート

@media handheld CSS ルールは、iPhone や Android などのハンドヘルド デバイスを対象としています。ただし、iPhone はデスクトップ ブラウザと同等の CSS をレンダリングできるため、このルールを完全にはサポートしていません。

iPhone などの特定のデバイスをターゲットにするには、@media クエリを使用します:

<link rel="stylesheet" href="path/to/iphone.css" media="only screen and (max-device-width:480px)" />

このクエリは、画面幅が 480 ピクセル以下のデバイスをターゲットとしています。

現在、ほとんどのデバイスは、解像度 854x480 の Droid X など、より高い解像度を備えています。これらのデバイスをターゲットにするには、高度なメディア クエリを使用してデバイスの物理的特性を検査します。

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px) and (resolution: 163dpi)" href="shetland.css" />

このクエリは、画面幅 480 ピクセル以下、解像度 163 dpi のデバイスをターゲットとします。

詳細特定のデバイスのターゲットに関する詳細については、メディア クエリに関する W3 Candidate Recommendation を参照してください。

以上がCSS @media クエリで iPhone および Android ブラウザをターゲットにする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。