ホームページ >ウェブフロントエンド >CSSチュートリアル >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 サイトの他の関連記事を参照してください。