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

CSS を使用した iPhone/iPad デバイスの検出

ユーザー エクスペリエンスを最適化し、カスタマイズされたコンテンツを配信するために、Web 開発者は多くの場合、検出する方法を模索します。 CSS のみを介して特定のデバイスを制御します。そのようなアプローチの 1 つは、メディア クエリを使用して iPhone と iPad を区別することです。

メディア クエリ アプローチ

既存のスレッドで提案されている解決策では、@media ルールを使用することを提案しています。ハンドヘルドおよび (max-device-width: 480px) パラメータ。ただし、この手法では望ましい結果が得られない可能性があります。

代替解決策

この問題に対処するには、より包括的なアプローチが必要です。特定のメディア クエリを活用することで、iPhone、iPad、およびそれらのバリエーションを効果的にターゲットにできます。

iPhone および iPod Touch

iPhone および iPod Touch デバイスを検出するには、次のメディアクエリ:

@media only screen and (max-device-width: 480px) {
  /* Styles for iPhone & iPod Touch */
}

iPhone 4 & iPod Touch 4G

iPhone 4 および iPod Touch 4G モデルの場合は、次のメディア クエリを使用します:

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  /* Styles for iPhone 4 & iPod Touch 4G */
}

iPad

iPad を識別するには、次のメディア クエリを使用します:

@media only screen and (max-device-width: 1024px) {
  /* Styles for iPad */
}

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