如何使用媒體查詢或 JavaScript 可靠地偵測非觸控螢幕裝置？

使用媒體查詢識別非觸控螢幕裝置

簡介：

確定裝置是否支援觸控螢幕至關重要用於增強Web 開發的使用者體驗。媒體查詢提供了一種根據裝置功能調整內容和功能的便捷方法。本文深入研究了偵測非觸控螢幕裝置的最安全媒體查詢技術，並探索了替代解決方案。

媒體查詢解決方案：

CSS4 媒體查詢草案引入了創新「指標」功能可查詢滑鼠等指點設備的可用性和精確度。它提供了三個可能的值：

• none:表示不存在指點設備。
• coarse:表示帶有有限的指點設備精確度。
• fine: 表示精確的定點設備。

使用此功能，您可以實現以下媒體查詢：

@media (pointer:coarse) {
    /* Code to adjust interface for coarse pointing devices */
}

瀏覽器相容性：

截至2013 年相容性：

截至2013 年相容性月，Windows 上的Chrome 支援「指標」媒體查詢，但iOS 或iOS 6 上的Safari 不支援。

替代解決方案： JavaScript

if (!window.Touch) {
    // Code to handle non-touchscreen scenarios
}

如果不支援媒體查詢，您可以考慮JavaScript 解決方案，例如以下：

結論：

CSS4中的“指針”媒體查詢提供了一種檢測非觸控螢幕設備的可靠方法。但是，應考慮瀏覽器相容性。作為替代方案，可以採用「!window.Touch」等 JavaScript 解決方案來實現相同的結果。

以上是如何使用媒體查詢或 JavaScript 可靠地偵測非觸控螢幕裝置？的詳細內容。更多資訊請關注PHP中文網其他相關文章！