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

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

課題:

iPad デバイスを特にターゲットにすることは、次のような課題であることが判明しています。他のタブレットとデバイスの幅が重ならないようにします。最小/最大幅条件を指定した従来の CSS メディア クエリを使用しても、iPad を LG Pad や Galaxy Tab などの他のデバイスから効果的に分離することはできません。

解決策:

成功解決策には、デバイスの高さと向きの条件をデバイスの幅と組み合わせて利用することが含まれます。次のメディア クエリは iPad 専用のスタイルを分離します:

• 縦方向:

  <code class="css">@media all and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) {
    /* iPad Portrait styles */
  }</code>

• 横方向:

  <code class="css">@media all and (device-width: 1024px) and (device-height: 768px) and (orientation: landscape) {
    /* iPad Landscape styles */
  }</code>

これらのメディア クエリを利用すると、同様のデバイス幅を持つ他のタブレットを除外しながら、特定のスタイルを iPad デバイスに適用できます。 HTTP 呼び出しを最適化するには、提供されている @media ルールを使用して、HTTP 呼び出しを既存の共通 CSS ファイルに組み込むことができます。

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