基于浏览器的Javascript样式表切换

Question

我目前正在为一位客户编辑网站，该网站使用Adobe Contribute，因此如果用户从手机浏览，它将使用不同的样式表。移动电话样式表更简单，会剥离背景图像和样式以减少加载时间。我知道最好的做法是为移动设备拥有完全独立的网站，但对于客户来说这并不实际，因为他需要使用Contribute更新网站内容。

这已经在某些设备上运行，例如iPhone（上次我测试时！），但在我的Android手机上，我遇到了一个奇怪的问题。当我访问URL或点击链接时，它使用默认样式表显示网站。如果我刷新页面，它会决定使用移动样式表呈现网站。就好像我的代码没有捕捉到UserAgent直到我点击刷新。

以下是我使用的代码：

<link href="css/style.css" id="stylesheet" rel="stylesheet" type="text/css" />

<script type="text/javascript">
    var userAgent = navigator.userAgent;

    if(userAgent.search("Mobile")>=0) document.getElementById("stylesheet").href = "css/style_mob.css";

    if(userAgent.search("Nokia")>=0) document.getElementById("stylesheet").href = "css/style_mob.css";

    if(userAgent.search("SymbianOS")>=0) document.getElementById("stylesheet").href = "css/style_mob.css";
</script>

脚本仅适用于少数设备，但您可以获得一般想法。

我的用户代理字符串如下：

Mozilla/5.0（Linux; U; Android 2.1-update1; en-gb; T-Mobile_G2_Touch Build/ERE27）AppleWebKit/530.17（KHTML, like Gecko）Version/4.0 Mobile Safari/530.17

编辑:

我应该补充说，我已经尝试使用媒体查询，但在iPhone或Android上完全不起作用。上面的代码对iPhone非常有效。以下是我在尝试使用媒体查询时使用的代码。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link href="../css/style.css" id="stylesheet" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)" href="../css/style_mob.css" />

- Liam Spencer

---

为什么不打印用户代理字符串以帮助识别错误？ - Devin Burke

你尝试过这样的代码吗？<link rel="stylesheet" media="handheld" href="css/style_mob.css"> - sauerburger

这并不是真正的问题。我知道这个方法是有效的，但是为什么我必须每次在我的安卓手机上刷新页面才能让它工作，这让我感到困惑。 - Liam Spencer

Answer 1

你不能使用媒体查询来确定浏览器必须使用哪个样式表吗？检查单个用户代理似乎是错误的方式。

编辑：我刚刚注意到你正在使用的媒体查询代码，我注意到你在使用JavaScript时使用了不同的路径：css/style_mob.css和../css/style_mob.css。这是一个打字错误还是可能导致它无法正常工作的原因？

- jeroen

---

我尝试使用媒体查询来链接备用电子表格，但这并没有起作用。 - Liam Spencer

由于您的目标是高端手机，媒体查询应该可以工作。如果不行，请检查您的代码。 - nLL

谢谢你们的回答，我会使用这段代码并看看我能做些什么。由于某种原因，它最初没有起作用，但我会尝试一下并看看会发生什么。 - Liam Spencer

我已经添加了我的代码，用于媒体查询。但是这根本不起作用。我是否明显地做错了什么？我认为现在可能只是我没有注意到的一些简单问题！ - Liam Spencer

我在下面发了另一个问题，以帮助我处理媒体查询，所以这篇文章是最接近正确答案的。对于任何偶然发现这篇文章的人，进一步的帮助在这里：https://dev59.com/HVbTa4cB1Zd3GeqP7hhq - Liam Spencer

Answer 2

我已经找到了一种解决方案，可以解决安卓浏览器在不刷新页面的情况下无法加载移动css样式表的问题。我称之为解决方法而不是永久解决方案，因为我有一个网站，在那里安卓第一次尝试加载移动css时没有任何问题。

<link media="handheld, only screen and (max-device-width: 480px)" href="mobile.css" type="text/css" rel="stylesheet" />

但是我有另一个网站，使用上述相同的代码来加载CSS，而Android浏览器除非我刷新页面，否则拒绝使用它。我尝试更改HTML的许多部分以匹配正常工作的网站，但都无济于事。因此，这里是解决方法的代码：

<link media="handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px)" href="mobile.css" type="text/css" rel="stylesheet" />

“手持设备”允许旧的手机加载mobile.css

“only screen and (max-width: 480px)”强制Android设备在第一次尝试时加载mobile.css，如果它们的宽度小于或等于480px。

“only screen and (max-device-width: 480px)”允许新的黑莓手机、iPhone和通常的Android设备在宽度小于或等于480px时加载mobile.css

Windows Mobile 7手机使用IE不使用新的媒体标签，因此您必须使用此代码才能使它们加载mobile.css：

<!--[if IEMobile 7]>
<link rel="stylesheet" type="text/css" href="mobile.css" media="screen" />
<![endif]-->

- Jeff

Answer 3

手机浏览器和桌面浏览器一样会缓存页面。在你花费太多时间研究问题之前，请确保它不是缓存问题。

清除手机缓存并再次访问URL。由于刷新后CSS正确加载，如果这解决了所有问题，我不会感到惊讶。

此外，你在问题中提到最好有一个单独的域名。我认为不一定。有很多原因为什么你只想为每个平台拥有1个域名。@media查询和响应式网页设计可以大有作为。 如果你对这个主题感兴趣，你应该一定要查看A list apart的this article。它可以给你一个关于可能性的想法。

编辑：

如果它仍然不起作用（似乎是这样），那么也许你应该测试你的用户代理代码。 删除你的style.css样式的加载语句，将其条件化为非Android浏览器：

从你的HTML中删除CSS行：

<link href="css/style.css" id="stylesheet" rel="stylesheet" type="text/css" />

然后在你的 JavaScript 中：

var normalCss = document.createElement('<link href="css/style.css" id="stylesheet" rel="stylesheet" type="text/css" />');
var mobileCss = document.createElement('<link href="css/mobile.css" id="stylesheet" rel="stylesheet" type="text/css" />');

if(userAgent.search("Android")>=0){
    document.getElementsByTagName("head")[0].appendChild(mobileCss);
}
else {
    document.getElementsByTagName("head")[0].appendChild(normalCss);
}

清除缓存并测试。第一次加载CSS还是没有样式的页面？

如果第一次没有加载，这可能意味着JavaScript代码没有及时运行。你是如何调用它的？它在头部区域吗？你是否使用jQuery和$(document).ready之类的东西？

- Hugo Migneron

---

在发布此帖子之前，我已经清除了缓存，这不是问题所在。感谢您的帖子。不过我应该在原始帖子中添加这一点。对此我很抱歉。 - Liam Spencer

谢谢Hugo。我正在调用头部的Javascript代码。没有使用jQuery。我还没有尝试创建元素，所以我会试一试这个方法。 - Liam Spencer

如果你仍然得不到任何内容，就要弹出你的userAgent字符串并发布它！ - Hugo Migneron

你的方法刚刚加载了没有样式表的Hugo页面。我已经在原始帖子中附加了用户代理字符串。 - Liam Spencer

很奇怪。当你刷新时，它会加载吗？似乎js代码第一次执行时出了一些奇怪的问题。在你刚刚创建的if语句中，尝试放置一个alert('test');并查看它是否第一次弹出。 - Hugo Migneron