CSS メディア クエリで特に iPad をターゲットにする方法は?

iPad のみをターゲットにする CSS メディア クエリの考案

iPad、Galaxy Tab、Acer Iconia、LG 3D Pad などのさまざまなタブレット デバイスを使用する場合、次のタスクが必要になります。 CSS メディア クエリで特定のデバイスをターゲットにすることは、特にデバイスが同様のプロパティを共有する場合に困難になる可能性があります。 iPad と LG Pad を例に挙げます。どちらもデバイス幅が 768 ピクセルであるため、区別することが困難です。

この問題を解決し、CSS3 メディア クエリのみを使用して iPad をターゲットにするには、次の解決策を検討してください:

<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait)" href="ipad-portrait.css" />
<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)" href="ipad-landscape.css" />

これこのアプローチでは、特定のデバイスの幅、高さ、向きの基準を定義することで、iPad を正確にターゲットにします。

または、HTTP リクエストを最小限に抑えるために、既存の CSS ファイル内にメディア クエリを埋め込むことができます:

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
  .ipad-portrait { color: red; } /* CSS rules for iPad portrait */
}
@media all and (device-width: 1024px) and (device-height: 768px) and (orientation:landscape) {
  .ipad-landscape { color: blue; } /* CSS rules for iPad landscape */
}

詳細については、次のリソースを参照してください:

• [CSS を使用した異なるデバイス プラットフォームの検出](https://css-tricks.com/snippets/css/detect- Different-device-platforms- using-css/)
• [その他の標準 CSS3 機能](https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3FEatures.html)

以上がCSS メディア クエリで特に iPad をターゲットにする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。