如何使用 CSS 媒體查詢定位 iOS 裝置？

使用 CSS 媒體查詢進行 iOS 裝置定位

在響應式設計領域，有必要針對特定裝置客製化網頁。常見的需求是僅針對 iOS 裝置。

iOS 裝置的媒體查詢

雖然沒有專門針對 iOS 的 @media查詢，但有一個使用@supports規則的解決方案：

@supports (-webkit-touch-callout: none) {
  /* CSS specific to iOS devices */ 
}

@supports not (-webkit-touch-callout: none) {
  /* CSS for other than iOS devices */ 
}

背後的原理查詢

此查詢利用「-webkit-touch-callout」屬性，該屬性由iOS 上的Safari Mobile 專門實現。透過檢查其支持，我們可以將 iOS 裝置與其他裝置區分開來。

優點和注意事項

• 此技術可以精確定位 iOS 設備，而不會影響其他設備螢幕尺寸相似的平台。
• 要注意的是，@supports 不適用於網路Explorer。
• 雖然它目前在 iOS 上運行，但不能保證 Apple 不會在未來版本中逐步取消支援。

替代方法

Apple 的開發者網站提供了 iOS 上 Safari 支援的 CSS 屬性的完整清單。透過研究這些屬性，您可能會找到 iOS 裝置的其他替代方案。

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