CSS メディア クエリを使用して iPad のみをターゲットにする方法は?

CSS メディア クエリを使用して iPad を排他的にターゲットにする

マルチデバイス環境では、特に共有している場合に、特定のデバイスを隔離することが困難になることがあります。同様の寸法。そのようなケースの 1 つは、デバイス幅が 768 ピクセルである LG Pad や Galaxy Tabs などの他のタブレットと iPad を区別することです。

この問題に対処するために、CSS メディア クエリが解決策を提供します。ただし、min-device-width や max-device-width などの従来の方法は、幅が重なるため効果がありません。

解決策:

最後に、デバイスを利用する方法です。高さによって問題が解決されます:

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

このソリューションは、幅 768 ピクセル、高さ 1024 ピクセル、縦向きまたは横向きのデバイスをターゲットにしており、iPad を効果的に分離します。

HTTP 呼び出しを最小限に抑えるには、メディア クエリはメイン CSS ファイル内に埋め込むことができます:

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

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

• https://developer.apple。 com/library/content/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3FEatures.html

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