CSS メディア クエリを使用して iPhone と iPad を正確に検出するにはどうすればよいですか?

CSS を使用した iPhone/iPad の検出: 包括的なガイド

CSS のみを使用してユーザーのデバイス タイプを決定することは、開発者にとって共通の課題となります。さまざまなソリューションが存在しますが、一般的な方法の 1 つはメディア クエリを使用することです。ただし、プログラミング フォーラムの最近の質問で強調されているように、@media handheld、screen および (max-device-width: 480px) { のみを使用すると、望ましい結果が得られない可能性があります。

成功するための鍵CSS を使用して iPhone または iPad を検出するには、適切なメディア クエリを利用する必要があります。次の例は詳細な内訳を示しています:

iPhone および iPod touch:

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

iPhone 4 および iPod touch 4G:

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="../iphone4.css" />

iPad:

<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="../ipad.css" type="text/css" />

これらのメディア クエリは、画面サイズとピクセル比に基づいて、特定のデバイス範囲を効果的にターゲットにします。これらの行をスタイルシートに組み込むことで、カスタム スタイルを動的に適用して、iPhone、iPad、iPod touch デバイスのユーザー エクスペリエンスを向上させることができます。

以上がCSS メディア クエリを使用して iPhone と iPad を正確に検出するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。