LG 3D Pad や Galaxy Tab などの他のタブレットを除外しながら、CSS メディア クエリで特に iPad をターゲットにするにはどうすればよいですか?

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

CSS メディア クエリで特定のデバイスをターゲットにすることは、特に複数のデバイスが同様のディメンションを共有する場合に困難になる可能性があります。この場合の目標は、LG 3D Pad や Galaxy Tab などの他のタブレットを除外し、iPad のみをターゲットにすることです。

デバイスの寸法と画面解像度

iPad の画面解像度は 1024 x 768 ピクセルで、LG 3D Pad と同じ幅ですが、Galaxy Tab とは異なります。 LG Pad の解像度は 1280 x 768 ピクセルですが、Galaxy Tab の解像度は 1280 x 800 ピクセルです。

標準 CSS メディア クエリ

提供されるメディアiPad のみをターゲットにする場合、クエリは十分ではありません。 min-device-width プロパティと max-device-width プロパティでは、iPad と LG Pad を区別できません。どちらもデバイス幅が 768px であるためです。同様に、min-resolution プロパティと max-device-width プロパティは、共有解像度範囲が 132dpi であるため、デバイスを区別できません。 device-aspect-ratio プロパティでも、iPad と LG Pad は区別されません。

Device-Specific CSS Media Queries

iPad のみをターゲットにするには、次のようにする必要があります。デバイス固有の CSS メディア クエリを使用します。次のメディア クエリを使用して、縦向きと横向きの iPad をターゲットにすることができます:

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
  /* CSS rules for iPad portrait */
}

@media all and (device-width: 1024px) and (device-height: 768px) and (orientation:landscape) {
  /* CSS rules for iPad landscape */
}

これらのメディア クエリは、デバイスの正確な寸法と向きを指定し、iPad のみに適用されるようにします。これらのクエリを使用すると、他のデバイスに異なるスタイルを維持しながら、iPad に特別にスタイルを適用できます。

追加の考慮事項

不要な HTTP 呼び出しを回避するには、以下を含めることができます。既存の共通 CSS ファイル内のデバイス固有の CSS:

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

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

このアプローチにより、HTTP リクエストを最小限に抑えながら、特に iPad をターゲットにすることができます。

以上がLG 3D Pad や Galaxy Tab などの他のタブレットを除外しながら、CSS メディア クエリで特に iPad をターゲットにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。