CSS を使用して iPhone および iPad デバイスを検出するにはどうすればよいですか?

CSS を使用した iPhone/iPad の検出: トラブルシューティングと解決策

元の質問は、CSS スタイルのみを使用して iPhone および iPad デバイスを検出することを目的としていました。 「@media handheld、only screen and (max-device-width: 480px)」を使用してソリューションを実装する最初の試みは失敗しました。

解決策:

iPhone、iPad、およびそれらの特定の亜種を効果的に検出するには、より包括的なアプローチが必要です。次の CSS メディア クエリは、特にさまざまなデバイスの画面サイズとピクセル比をターゲットとしています:

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

これらのメディア クエリをスタイルシートに組み込むことで、特定の CSS スタイルが確実に適用されるようにすることができます。検出されたデバイスのタイプ。このアプローチにより柔軟性が高まり、Web サイトやアプリケーションの外観をさまざまな iOS デバイスに合わせて調整できます。

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