I've been trying to use a dragscroll plugin to scroll through content, but I've run into an issue where it doesn't work on mobile devices.
By mobile devices, I mean those without a mouse cursor, like smartphones and tablets with touchscreens.
The container's rule is currently set to overscroll: hidden, but I need to change it to overscroll: auto for mobile devices so that scrolling will work properly.
Unfortunately, all my media queries are based on device width instead of type, so I'm stuck using something like:
@media only screen and (max-device-width: 768px) {
.dragscroll-container {
overflow: auto;
}
}
But what if the device has a wider screen than 768px? It's a rare scenario, but if it happens, we won't be able to scroll because the overflow: auto rule won't apply.
Is there a media query that targets portable devices in general, regardless of their width?