如何使用 CSS 媒體查詢專門針對 iPad，同時排除 LG 3D Pad 和 Galaxy Tab 等其他平板電腦？

用於定位iPad 的CSS 媒體查詢

使用CSS 媒體查詢定位特定設備可能具有挑戰性，尤其是當多個設備共享相似尺寸時。在本例中，目標是僅針對 iPad，而排除其他平板電腦，例如 LG 3D Pad 和 Galaxy Tab。

裝置尺寸和螢幕解析度

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。同樣，最小解析度和最大設備寬度屬性無法區分設備，因為它們的共享解析度範圍為 132dpi。 device-aspect-ratio 屬性也不區分 iPad 和 LG Pad。

特定於裝置的 CSS 媒體查詢

要專門針對 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 */
  }
}

此方法可讓您專門針對iPad，同時最大限度地減少HTTP 請求。

以上是如何使用 CSS 媒體查詢專門針對 iPad，同時排除 LG 3D Pad 和 Galaxy Tab 等其他平板電腦？的詳細內容。更多資訊請關注PHP中文網其他相關文章！