如何使用 CSS 媒體查詢專門定位 iPad？

使用CSS 媒體查詢專門定位iPad

使用CSS 媒體查詢定位特定設備可能具有挑戰性，尤其是當設備共享相似的螢幕尺寸時。要隔離iPad，請考慮以下方法：

使用設備寬度和設備高度：

可以透過指定設備寬度和設備高度來細化提供的媒體查詢高度，這是iPad 獨有的：

@media only screen and (min-device-width: 768px) and (max-device-width: 768px) and (min-device-height: 1024px) and (max-device-height: 1024px)

組合設備寬度和解析度：

或者，您可以將設備寬度與設備解析度組合：

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (min-resolution: 132dpi)

使用連結到特定樣式表的媒體查詢：

為了提高效率，您可以建立專為iPad 定制的單獨樣式表，並根據裝置特定媒體有條件地包含它們查詢：

<code class="html"><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: 1024px) and (device-height: 768px) and (orientation:landscape)" href="ipad-landscape.css"></code>

在CSS 中合併媒體查詢：

要減少HTTP 請求，您可以在主樣式表中定義特定於設備的CSS 規則：

<code class="css">@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
  .ipad-portrait { color: red; }
}</code>

以上是如何使用 CSS 媒體查詢專門定位 iPad？的詳細內容。更多資訊請關注PHP中文網其他相關文章！