CSS を使用して iPhone と iPad を検出するにはどうすればよいですか?

CSS を使用したデバイス検出

開発者は、さまざまなデバイス間でユーザー エクスペリエンスを最適化するために、アクセスしているデバイスの種類を検出する方法を模索することがよくあります。彼らのウェブページ。アプローチの 1 つは、CSS を活用してデバイスを区別することです。

課題: iPhone と iPad の検出

一般的なニーズは、CSS のみを使用して iPhone と iPad を検出することです。提案されている方法の 1 つは、@media ハンドヘルド、画面のみ、および (最大デバイス幅: 480px) メディア クエリを使用することです。ただし、このアプローチには制限が生じる可能性があります。

解決策

幸いなことに、CSS を使用して iPhone と iPad を検出する洗練された方法があります。

• iPhone および iPod touch:
  

  <link rel="stylesheet" media="画面のみと (max-device-width: 480px)" href="../iphone. css" type="text/css" />

• iPhone 4 および iPod touch 4G:
  

  <link rel="stylesheet " media="画面のみと (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="../iphone4.css" />

• iPad:
  

これらの CSS メディア クエリは、特定の各デバイスを効果的にターゲットにし、開発者がそれに応じてスタイルシートを調整できるようにし、さまざまな画面サイズでのユーザー エクスペリエンスを向上させます。 .

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