Question

<link media="only screen and (min-device-width : 320px) and (max-device-width : 480px)" href="smartphone.css" type= "text/css" rel="stylesheet" />
<link media="only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5)" href="iphone.css" type= "text/css" rel="stylesheet" />

am I doing it right ? or there is better way to do this ?

Answer 1

Like Cole mentioned, you can check the userAgent. This is some javascript that you can use to detect if the userAgent is an iphone. (Source)

<script language=javascript>
<!--
if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
//Change the css
}
-->
 </script>