nomis5 - 8:54 pm on Mar 8, 2013 (gmt 0)
Isn't your solution missing the point of the OP? I'm no technical expert but your code appears to be trying to serve up different style sheets within a webpage and not, as the OP wanted, detecting a mobile device and then diverting to a separate mobile site.
I may also be wrong as well but the solution you provide for serving up different style sheets based on "width" doesn't take into account what that width is.
Again I'm no technical expert but something along the lines of
<meta name="viewport" content="width=device-width, initial-scale=x, maximum-scale=x">
needs to be included in the html to ensure that "width" is the "device-width" and not some other definition of width. Androids seem to serve up amazingly silly definitions of screen width without that statement.
I am amazed there has been no post here of a fool proof way of
a) detecting mobiles / tablets etc in css and using different css rules based on the result
b) detecting different mobiles in an html page and redirecting to a mobile site(s) based on the result.
All points made solely to try and learn a bit more about this perplexing subject!