使用 Js 更改我的 ipad 样式表？答案

【问题标题】：Using Js to change my style sheet for ipad?使用 Js 更改我的 ipad 样式表？
【发布时间】：2012-02-19 04:25:06
【问题描述】：

我目前使用 CSS 媒体查询将样式应用于我的网站，这些样式在调整屏幕大小或使用 iphone 访问时生效。 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 现在的屏幕分辨率为 940 像素。

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

我创建函数：

<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";
}

【问题讨论】：

【解决方案1】：

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

【讨论】：

谢谢。除了我使用媒体查询来定义样式表之外，那将是很棒的。但正如我在我的问题中所说，iPhone 的分辨率为 940 像素，因此它采用了应用于 iPad 的样式。这就是为什么我想使用 JavaScript 来专门检测 iPad。

【解决方案2】：

您正在寻找的是浏览器窗口的视口大小，这是我发现的一篇很好的文章，其中包含您正在寻找的解决方案。

【讨论】：

我的页面顶部有这个，但它仍然会影响 iphone 样式 .content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable =1.0;" />