html - How to detect ONLY with CSS mobile screens

Question

I've found a lot of threads here talking about CSS and mobile screens.

After searching, I couldn't find a solution for some devices. For example: Motorola Moto G4 Plus uses FULL HD width(1080px), only bootstraps detect the xs-view configuration.

Styling and trying and trying I couldn't get some styles set up.

So, how can I make the same procedure as Bootstrap to set up my styles and in the general procedure for all devices?

Please, only CSS or as much JS(if it possible, don't), the same as bootstrap.

I've tried the @media screen and @media all queries. Doesn't work.

Thanks for reading.

Answer 1

All touch screen and mobile devices (including tablets, smartphones) can be detected with css with the following @media rule.

@media only screen and (hover: none) and (pointer: coarse){

/* Regular CSS rules here*/

}