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

CSS 媒體查詢：專門針對iPad

挑戰：

專門針對iPad 設備已被證明是一項挑戰，因為與其他平板電腦重疊設備寬度。使用具有最小/最大寬度條件的傳統 CSS 媒體查詢並不能有效地將 iPad 與 LG Pad 和 Galaxy Tab 等其他裝置分開。

解決方案：

成功解決方案涉及利用設備高度和方向條件以及設備寬度。以下媒體查詢將專門針對iPad 隔離樣式：

• 縱向方向：

  <code class="css">@media all and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) {
    /* iPad Portrait styles */
  }</code>

  登入後複製

• 橫向方向：

  <code class="css">@media all and (device-width: 1024px) and (device-height: 768px) and (orientation: landscape) {
    /* iPad Landscape styles */
  }</code>

  登入後複製

透過利用這些媒體查詢，您可以將特定樣式套用到iPad設備，同時排除其他具有相似設備寬度的平板電腦。要優化 HTTP 調用，您可以使用提供的 @media 規則將它們合併到現有的通用 CSS 檔案中。

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