Detect mobile browsers, not just screen width

Question

I know that I can activate some style with a media query like this:

/* Magic for mobile devices */ @media (max-width: 33em ) { } 

however, I do not really like this approach, since it only checks for the width of the screen. I found this java script code to detect mobile browsers and now I need the same validation with CSS

 if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) { // some code.. } 

Is there a CSS equivalent of this js?

Answer 1

You can use the following:

 <link rel="stylesheet" type="text/css" href="mobile.css" media="handheld"> 

This will target small or handheld devices.