如何使用 CSS 和 JavaScript 偵測觸控螢幕？

使用媒體查詢偵測觸控螢幕

在響應式網頁設計領域，使內容適應不同的輸入裝置至關重要。確定設備是否為觸控螢幕可以透過適當的調整來增強使用者體驗。

媒體查詢解決方案

CSS4 媒體查詢草案提供了專門用於此目的的功能： '指針'。它提供三個值：

• 無：無指點設備
• 粗略：低精度指點設備
• 粗略：低精度指點設備

很好：

指向準確設備

@media (pointer:coarse) {
    /* Adjust styles for low-accuracy pointing devices */
}

用法：

相容性：

• 截至 2013 年 1 月 20132日，瀏覽器相容性是作為如下：
• Chrome/Win：支援
• Chrome/iOS：不支援

Safari/iOS6：不支援

JavaScript替代品：

• 雖然「指標」媒體查詢在瀏覽器支援方面受到限制，JavaScript 解決方案提供替代方案：
• !window.Touch: 偵測觸控輸入

Modernizr:

A提供廣泛的裝置功能的庫，包括觸控螢幕偵測

結論：

使用「指針」媒體查詢（如果可用）是偵測觸控螢幕的最精確方法。然而，對於不支援的設備，可以有效地使用 !window.Touch 等 JavaScript 解決方案。

以上是如何使用 CSS 和 JavaScript 偵測觸控螢幕？的詳細內容。更多資訊請關注PHP中文網其他相關文章！