如何使用 CSS 媒體查詢專門針對 iPad？

設計專門針對iPad 的CSS 媒體查詢

使用各種平板電腦設備（如iPad、Galaxy Tab、Acer Iconia 和LG 3D Pad）時，以下任務使用CSS 媒體查詢定位特定設備可能具有挑戰性，特別是當它們具有相似的屬性時。以iPad和LG Pad為例；兩者的裝置寬度均為 768px，因此很難區分它們。

要解決此問題並僅使用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中文網其他相關文章！