Target desktop browsers only by css

Question

For an application I want to show custom scrollbars for desktop browsers only.

Normally one would use media queries to target small devices and adapt the layout to the available width of the screen. But this time I just don't want scrollbars for mobile and tablet devices. I don't know how I could solve this, because small desktops (1024 x 768) use the same resolution as some tablets do.

Is there a hack or something, so I could do something like:

@media (target-real-desktops-only) {
    ::-webkit-scrollbar {
        width: 17px;
    }

    ::-webkit-scrollbar-thumb {
        background-color: #959595;
        border-radius: 40px;
        border: 5px solid transparent;
        background-clip: padding-box;
    }
}

score 3 · Accepted Answer · answered Jun 16 '16 at 10:17

3

There is no way to tell for sure with a media query. In my opinion the best way is to differentiate by detecting if the device is a touch device or not. You can use Modernizr for that. Modernizr will automatically add a .touch or a .no-touch class to the html. You can then add styling accordingly.

Another option is doing this manually. Like so:

document.querySelector('html').className += 
("ontouchstart" in window) || window.DocumentTouch && document instanceof DocumentTouch ? ' touch' : ' no-touch';

And then add your styles via the same manner

.no-touch ::-webkit-scrollbar {
    width: 17px;
}

.no-touch ::-webkit-scrollbar-thumb {
    background-color: #959595;
    border-radius: 40px;
    border: 5px solid transparent;
    background-clip: padding-box;
}

answered Jun 16 '16 at 10:17

Anwardo

650
5
15

Thanks checking if a device is 'touchable' is a nice approach! – Jacob van Lingen Jun 16 '16 at 11:30
Will the `.touch` class be added for the touch screen laptops? – Palkesh Jain Sep 19 '19 at 05:01
in times of laptops with touchscreens this check is fruitless – Andreas Herd Sep 04 '20 at 13:56

score 0 · Answer 2 · edited May 23 '17 at 12:26

0

# Desktop
only screen and (min-width: 992px)

# Huge
only screen and (min-width: 1280px)

Media Queries: How to target desktop, tablet and mobile?

edited May 23 '17 at 12:26

Community

1
1

answered Jun 16 '16 at 10:00

Saika

398
3
14

I know how media queries work; I did ask if it was possible to detect by css if a browser is desktop (even if I shrink my browser to width 300px, I still only want to target the desktop browsers). – Jacob van Lingen Jun 16 '16 at 11:33

Target desktop browsers only by css

2 Answers2