使用Js更改ipad的样式表？

Question

我目前在我的网站上应用了样式，这些样式在调整屏幕大小或使用iphone访问时使用CSS媒体查询生效。 http://iamcreative.me

媒体查询

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 320px) and (orientation:portrait)" href="css/iphone.css" />

我发现的问题是，一旦我为ipad的720px纵向视图创建了样式表，这会影响我为iphone创建的一些样式！

我认为这是因为iphone现在的屏幕分辨率为940px。

所以这就是我想出来的，并想知道这是否是解决问题的最好方法？

我创建了这个函数：

<script type="text/javascript">
function isiPad() {
    return navigator.userAgent.match(/iPad/i); 
}
</script>

然后在页面中添加：

if (isiPad()) { 
document.styleSheets[0].href="ipad.css";
}
else
{
document.styleSheets[0].href="everything-else.css";
}

Answer 1

您正在寻找的是浏览器窗口的视口大小，这是一篇很好的文章，我发现它可以解决您正在寻找的问题。

iPad/iPhone viewport settings

Answer 2

您可以使用CSS屏幕查询：http://www.w3.org/TR/css3-mediaqueries/为不同的设备定义不同的样式。