mobile stylesheet include

[paulirish]

i'm not sure on the best way to serve this..

from:
http://www.cssquirrel.com/presentations/refresh-2009-12/

<link rel="stylesheet" href="mobile.css" media="handheld, screen and (max-device-width: 480px)" type="text/css" />
(Since the iPhone Thinks It's a Big Boy)


<link rel="stylesheet" href="mobile.css" media="handheld, only screen and (max-device-width: 480px)" type="text/css" />
(To Help An Anonymous Quirky Browser So It Won't Think It's Mobile)


<link rel="stylesheet" href="mobile.css" media="handheld, only screen and (max-device-width: 480px)" type="text/css" />
<meta name="viewport" content="width = 320" />
(So The iPhone Won't Be Zoomed Out)


Here's A Solution
<link rel="stylesheet" href="standard.css" media="screen and (min-device-width: 481px)" type="text/css" />
<link rel="stylesheet" href="mobile.css" media="handheld, only screen and (max-device-width: 480px)" type="text/css" />
(Option To Override With JS-Powered Switch)
(Save It With A Cookie)

[paulirish]

cssquirrel added:
@paul_irish The premise is the top link example would target normal devices (but be ignored by mobile devices).
@paul_irish And the bottom would be targeted by mobile, but ignored by standard PCs. So the mobile doesn't have to overwrite desktop styles.

[nimbupani]

http://perishablepress.com/press/2009/08/02/the-5-minute-css-mobile-makeover/

[nimbupani]

This seems very well researched:
http://gist.github.com/348772

from http://www.bushidodesigns.net/blog/mobile-device-detection-css-without-user-agent/

[nimbupani]

Oh and here is a scary list: http://www.mobile-phone-specs.com/

[nimbupani]

k I think this one is done. If there is any new link to look into we should open it again.