How Can I Reliably Detect Non-Touchscreen Devices Using Media Queries or JavaScript?

Identifying Non-Touchscreen Devices with Media Queries

Introduction:

Determining whether a device is touchscreen-enabled is crucial for enhancing user experience in web development. Media queries provide a convenient way to adapt content and functionality based on device capabilities. This article delves into the safest media query technique to detect non-touchscreen devices and explores alternative solutions.

Media Query Solution:

The CSS4 media query draft introduces the innovative 'pointer' feature to inquire about the availability and precision of a pointing device, such as a mouse. It provides three possible values:

• none: Indicates the absence of a pointing device.
• coarse: Represents a device with a pointing device of limited accuracy.
• fine: Denotes an accurate pointing device.

Using this feature, you can implement a media query like this:

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

Browser Compatibility:

As of January 2013, the 'pointer' media query was supported in Chrome on Windows but not on iOS or Safari on iOS 6.

Alternative Solution: JavaScript

If media queries are not supported, you can consider JavaScript solutions like the following:

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

Conclusion:

The 'pointer' media query in CSS4 provides a robust way to detect non-touchscreen devices. However, browser compatibility should be taken into account. As an alternative, JavaScript solutions like '!window.Touch' can be employed to achieve the same result.

The above is the detailed content of How Can I Reliably Detect Non-Touchscreen Devices Using Media Queries or JavaScript?. For more information, please follow other related articles on the PHP Chinese website!