4

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?

Anton Belev
  • 11,963
  • 22
  • 70
  • 111
  • How do you define "mobile"? What about 7", 10", or 20" tablets? – SLaks Aug 13 '13 at 14:10
  • @SLaks That's why I'm asking this question. Currently `@media` offers a check against screen width. What if there is a 17" tablet and 17" PC screen. I would like to show the mobile version of my CSS on the tablet and the desktop version on the PC. If there is a CSS check against mobile browsers this will allow me to show the appropriate styles. – Anton Belev Aug 13 '13 at 14:13
  • That's my point. You probably shouldn't be doing that in the first place. Why is the mobile version more suitable? – SLaks Aug 13 '13 at 14:15
  • 1
    Because when you are using tablet you have to use your fingers to click on a button, so for the user would be better to have larger buttons. Doesn't matter if he is using 17" tablet or 7" - still have to touch the button. – Anton Belev Aug 13 '13 at 14:18
  • What about Windows 8 touch desktops & convertible laptops? – SLaks Aug 13 '13 at 14:26
  • 1
    http://www.stucox.com/blog/you-cant-detect-a-touchscreen/ – SLaks Aug 13 '13 at 14:27
  • Yep you are right about Windows 8 touch desktops, I'll have a look on this article. – Anton Belev Aug 13 '13 at 14:30

1 Answers1

4

You could use the following:

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

This will target small or handheld devices.

koningdavid
  • 7,903
  • 7
  • 35
  • 46
  • I'm using ASP.NET themes, so the only CSS reference is for Jquery Mobile's CSS. How can I apply your answer to my case? – Anton Belev Aug 13 '13 at 14:09
  • @AntonBelev Sorry I don't have the answer to that, i'm not familiair with asp.net. But what your asking is another question, so it's best to make a new post for that. – koningdavid Aug 13 '13 at 14:13
  • 1
    You can use a media query eg: @media handheld { .myclass {width: 300px;} } – TimoSolo Apr 06 '16 at 06:56