Detect mobile device browsers, not only screen width

css browser-detection mobile-devices
Anton Belev picture Anton Belev · Aug 13, 2013 · Viewed 7.7k times · Source

I know that I can activate some styling with media query like that:

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

however I don't really like this approach since it checks only against screen width. I found this java script code for detecting mobile browsers and now I need the same check with CSS

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

Is there a CSS equivalent of this js?

Answer

koningdavid picture koningdavid · Aug 13, 2013

You could use the following:

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

This will target small or handheld devices.

Related questions

How to write specific CSS for mozilla, chrome and IE

What would be the CSS conditional statement you can use to include specific CSS for IE, Mozilla, Chrome. If IE #container { top: 5px; } If Mozilla #container { top: 7px; } If Chrome #container { top: 9px; } What would be the respective 'If's' ?

Read More
How to target Microsoft Edge with CSS?

I would like to target Edge and have flexbox behave simliar to Firefox 33 / Chrome, for more detail see this question. Can one target Edge in CSS?

Read More
Show a message if the browser is not internet explorer 9 or greater

I would like to show my users a bar that looks like this, if: Browser is not IE; or Browser is IE but is version 8 or earlier (Note that the screenshot is just for illustration - IE 9 is supported for …

Read More