I was designing a mobile version of my website but then realized I need to support at least three (iPhone, iPad and Android). In that case, I was thinking of using jQuery for the task where I would first detect what device it is and then load the appropriate CSS. How would I go about doing this? Is it something like this? And is this even the good way or is there a better way of achieving the same?
<html>
<head>
<script type="text/javascript">
//Detect device type using jQuery
//Insert the proper stylesheet?
//Rest of the javascript
</script>
</head>
<body>
...
</body>