How can I use a different CSS using jQuery?
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>
If you don't mind putting all you CSS into one stylesheet you could do this:
Place this in the <head> tag of your HTML:
<link id="ss" rel="stylesheet" type="text/css" href="norm.css" />
And then add this to your javascript file.
var uagent = navigator.userAgent.toLowerCase();
if (uagent.search("iphone") > -1)
{
$("#ss").attr("herf", "iphone.css");
}
if (uagent.search("ipad") > -1)
{
$("#ss").attr("herf", "ipad.css");
}
if (uagent.search("andriod") > -1)
{
$("#ss").attr("herf", "android.css");
}
加载中,请稍侯......
精彩评论