How Can I Detect Non-Touchscreen Devices Using CSS Media Queries?

Detecting Non-Touchscreen Devices with Media Queries

CSS media queries provide a convenient way to adapt website styling based on various device characteristics. While determining whether a device is touchscreen is not directly supported by media queries, there's an emerging media feature that addresses this issue.

CSS4 'pointer' Media Feature

The CSS4 media query draft introduces the 'pointer' media feature, which queries the presence and accuracy of a pointing device on a device. This feature takes on the following values:

• 'none': No pointing device is available.
• 'coarse': A pointing device with limited accuracy is available.
• 'fine': A highly accurate pointing device is available.

Using the 'pointer' Media Feature

The 'pointer' media feature can be used as follows to target non-touchscreen devices:

@media (pointer:coarse) {
    /* CSS styles for non-touchscreen devices */
}

Browser Compatibility

The 'pointer' media feature is currently supported in some browsers, but compatibility varies. For the latest information on browser compatibility, refer to Quirksmode.

Alternative JavaScript Solution

If device-specific styling cannot be achieved using the 'pointer' media feature, consider using a JavaScript solution. Common approaches include:

• !window.Touch: Detects the absence of a touchscreen.
• Modernizr: Provides a comprehensive set of feature detection tools, including touchscreen detection.

Conclusion

The 'pointer' media feature offers a convenient way to detect non-touchscreen devices in CSS media queries. However, it is still in development and has limited browser support. For alternative JavaScript-based solutions, consider !window.Touch or Modernizr.

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