How to detect iPhone using CSS or Javascript

I am trying to display three different stylesheets for iPhones, other handheld devices vs PCs, but I am unable to detect an iPhone using any approach. Unfortunately I don't have an iPhone and am using an iPhone simulator for testing, so I'm not sure if the code below doesn't work on the iPhone or just doesn't work on the iPhone simulator. My preference would be to resolve this using CSS or a Meta tag, but I will use Javascript if necessary.

Approach #1: CSS

<!--[if !IE]>-->
<link media="only screen and (max-device-width: 480px)" rel="stylesheet" type="text/css" href="iphone.css"/>
<!--<![endif]-->
<link href="blackberry.css" rel="stylesheet" type="text/css" media="handheld"> 
<link href="pc.css" rel="stylesheet" type="text/css" media="screen"> 


Approach #2: Javascript

<script type="text/javascript">
if (screen.width <= 480) 
	{document.write('<link href="iphone.css" rel="stylesheet" type="text/css">');} 
</script>


Approach #3: Meta tag

<meta name="viewport" content="width=320">

<meta name="viewport" content="width=device-width, minimum-scale=1.0, 
 maximum-scale=1.0">

Select allOpen in new window