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

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

在多設備環境中，隔離特定設備可能具有挑戰性，尤其是當它們共享時相似的尺寸。其中一個案例是將 iPad 與 LG Pad 和 Galaxy Tab 等其他平板電腦區分開來，所有這些平板電腦的裝置寬度均為 768px。

為了解決這個問題，CSS 媒體查詢提供了一個解決方案。然而，由於寬度重疊，像 min-device-width 和 max-device-width 這樣的傳統方法是無效的。

解決方案：

最後，一種利用設備的方法height 解決了這個問題：

<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中文網其他相關文章！