0

I was having a discussion at work today about using both media queries and targeting different mobile OSes via user agent detection by way of javascript and body classes.

My coworker said we should never use user agent detection via javascript for css, ie appending the OS of a device to the body as a class along with browser, and instead we should create a media query for each mobile device and fix any OS specific issues that way. He said we wouldn't be able to capture the nuance of each devise without doing so.

I responded that screen resolutions are quickly changing and at some point an iOS device was going to be the same resolution as an Android device, if it hasn't already happened. This means it will become hard to address OS domain specific issues if the media queries at some point start bleeding into one another. That a better solution would be to find just a few natural break points for the media queries and then deal with OS specific issues via user agent detection css declarations.

Not to mention that is a lot of different possible devices to target, and that a new device with a new resolution would cause us to have to add a whole new set of media queries. I reiterated that a more general, and dry solution, would be better.

I also pointed that that some issues are in the domain of the device dimensions, grid objects resizing, general font size changes, and spacing differences that come from the last two.

Other issues though fall in the domains of OS related issues. For instance in iOS you can control the amount of text zoom going on via, ‑webkit‑text‑size‑adjust, but in Android the problem isn't as simple, though you can try to hack your way through things.

At that point it was closing time and we deiced to shelve the discuss until tomorrow. He seemed pretty insistent that my idea to use user agent classes on the body was a bad idea though and said he would explain further tomorrow. Being slightly OCD I went home and started googling, but ended up not finding much information besides a few articles saying to use media queries over user agent detection, but nothing about using user agent detection along with media queries.

Am I missing some large pitfalls, or holes in my logic here? Is there some edge cases where user agent detection fails to identify correctly in a way that would prevent me from address an OS specific issue? Or are the implementation of Android so different that I really have no choice but to target each device individual via media queries?

Community
  • 1
  • 1
rovermicrover
  • 1,453
  • 1
  • 15
  • 21
  • Your coworker is right, but your ideas are excellent. As a rule I use media queries based on the device dimensions and nothing else. You might want to look at Bootstrap (http://getbootstrap.com/). – user2182349 Jul 30 '15 at 00:50
  • 1
    User agents can be faked. When I use media queries, I don't target a device. I target points when something on the site breaks. So if the navigation needs to change at 790 because its too wide to fit, that warrants a unique media query. I'm also a firm believer that you should be building fluid websites, its more work up front, but in the long run its worth it. – ericjbasti Jul 30 '15 at 01:00
  • @ericjbasti I actually agree with your larger point about what you call fluid websites, similar to what I meant by natural break points, but if they are faking their own user agent isn't that kind of their own fault if their experience suffers? I mean yes you shouldn't trust the client, but at the same time if they want to see a messed up page, they can see a messed up page for all I care. It is not like trusting the user agent in this instance is going to give them excessive permissions to anything server side. – rovermicrover Jul 30 '15 at 01:07
  • I can't remember which browser/device it was, but I do recall a time when other browsers claimed to be iOS Safari, because sites would use the User Agent string to deny access to a site. – ericjbasti Jul 30 '15 at 01:36
  • Apparently it is not uncommon after doing some research. http://blog.html5test.com/2012/10/everybody-wants-to-be-like-safari/. I thought there might be some issues with the user agent faking browser or reporting wrong version numbers, etc, not with the actually OS, guess I was wrong. Next stop trying to figure out if I can "feature" test any of this. – rovermicrover Jul 30 '15 at 03:26

1 Answers1

2

"This is an extremely complicated and almost completely useless browser sniffing library. Useless because you shouldn't use browser sniffing. So stop right now and go read something about feature detecting instead. I'm serious. Go away. You'll thank me later." - https://github.com/WhichBrowser/WhichBrowser

Madness
  • 2,730
  • 3
  • 20
  • 29
  • I get how feature testing would be a lot easier when writing javascript code, but how do I go about feature testing the method of text zoom being applied by a mobile browser, so I know how to compensate for example? – rovermicrover Jul 30 '15 at 03:12
  • I am not sure what do you mean by "the method of text zoom", but you are not finding anything about using user agent detection along with media queries because user agent detection is not the correct solution for your problem. The exact problem you are trying to solve would be more helpful that just a general "I am trying to solve every possible possibility" situation. – Madness Jul 30 '15 at 03:43
  • For example, if the argument here is how to deal with text size resizing on zoom, that is a completely different question for another thread. – Madness Jul 30 '15 at 03:50
  • 1
    iOS and Andriod use different methods for handling automatic text zoom. You can control iOS's, but not Android. You control iOS via css attribute, -webkit‑text‑size‑adjust, and silly me I forgot I could just test for that. Which at least solves one problem. So, You basically gave me the answer. Instead of appending .ios to the body, I should be appending .text-size-adjustable or .text-size-not-adjustable. I can then work through each difference in "features" between mobile browsers, and append their feature type via javascript to the body. Same results, but more solid, and dry code. – rovermicrover Jul 30 '15 at 04:21