I am using the following code in my Master Page:
<link href="~/css/iPad.css" media="all and (max-device-width:1024px)" rel="stylesheet" type="text/css" />
<link href="~/css/iPad.css" media="all and (max-device-width:768px)" rel="stylesheet" type="text/css" />
This is to pick up the iPad but Google and Safari come up with the iPad style if on a 1024 x 768 screen resolution. I could use the useragent like so:
<script type="text/javascript"> // <![CDATA[
if ((navigator.userAgent.indexOf('iPhone') != -1) || (navigator.userAgent.indexOf('iPod') != -1) || (navigator.userAgent.indexOf('iPad') != -1)) {
document.write('<link href="/css/ipad.css" media="screen" rel="stylesheet" type="text/css" />');
} // ]]>
</script>
But then I would get issues if a page is not in the root directory as it won't have the ~ in the url. Any id ...
Go to the complete details ...