Mobile device type detection for styling?

Question

Could anyone please advise on the best method to detect whether a site is being viewed on a mobile rather than a PC? I would like to use a couple of mobile style sheets to suit each platform, but understand that iPhones/Android try to render the site as a PC rather than mobile?

I guess a JavaScript detection script may be an option?

possible duplicate of [detect mobile browser and javascript support](http://stackoverflow.com/questions/5077080/detect-mobile-browser-and-javascript-support) — Marcel Korpel, May 27 '11 at 15:19
@MarcelKorpel: I may be wrong, but I think OP wants a straight-CSS solution, not intervening with JavaScript. — Brad Christie, May 27 '11 at 15:21
or rather: [How to Detect Mobile Browser Capability](http://stackoverflow.com/questions/3428234/how-to-detect-mobile-browser-capability), as this is more something to do at the server side. — Marcel Korpel, May 27 '11 at 15:22
@Brad: you're right, I was too quick; however, there's a [javascript] tag in his question... — Marcel Korpel, May 27 '11 at 15:23

score 2 · Accepted Answer · answered May 27 '11 at 15:18

2

How about using CSS @media?

h2 {
  font-size: 12em;
}
@media (max-width: 320px) {
  h2 {
    font-size: 8em;
  }
}

answered May 27 '11 at 15:18

Brad Christie

100,477
16
156
200

@Emyr: Agreed, though I find it works /fairly well/ when the screen starts at a specific size range, and the problems /usually/ arise when on a resize event (though I could be wrong). – Brad Christie May 27 '11 at 15:22

score 0 · Answer 2 · answered May 27 '11 at 15:26

As others have pointed out, the use of @media may work for newer mobile devices and may be sufficient for your needs. I found this article to be very helpful for iPhone mobile website development.

If you need to do quality mobile detection on the server then you will need to get the server-side developers involved. I use the Wurfl database in order to power our mobile detection on the server, which then directs the inclusion or exclusion of various stylesheets, scripts, and even some page workflows.

Mobile device type detection for styling?

2 Answers2