CODEWITHSUNDEEP
cssresponsive-design
Eleine
Eleine

Reputation: 31

Can you add CSS for desktop only that is resolution independent?

Can you detect if the user is viewing your website from a touch enabled device, or is using a mouse?

There are very large tablets and tiny laptops, so I feel like media queries based on screen size don't do the trick.

For context: I have some buttons with an extra element. I want that element to be displayed by default when viewing from phone or tablet, and to be displayed on hover when viewing from laptop/desktop.

Is that possible?

Upvotes: 1

Views: 50

Answers (1)

Abin Thaha
Abin Thaha

Reputation: 4643

In a more reliable way, you can use the pointer and hover media queries separately or together to achieve what you are tryig.

/* smartphones, touchscreens */
@media (hover: none) and (pointer: coarse) {
    /* ... */
}
/* stylus-based screens */
@media (hover: none) and (pointer: fine) {
    /* ... */
}
/* Nintendo Wii controller, Microsoft Kinect */
@media (hover: hover) and (pointer: coarse) {
    /* ... */
}
/* mouse, touch pad */
@media (hover: hover) and (pointer: fine) {
    /* ... */
}

Pointer media query helps you to understand the kind of pointing device with which the site is being used. Values to the pointer media query are 'fine', 'coarse', and 'none'.

While hover media query is used to understand if the primary interactive mechanism can hover over elements with ease. The values are 'hover' and 'none'.

Upvotes: 3

Related Questions