基于浏览器使用Javascript切换样式表

Question

我目前正在尝试为使用 Adob​​e 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-更新1；英-GB； T-Mobile_G2_Touch 版本/ERE27) AppleWebKit/530.17 （KHTML，如 Gecko）版本/4.0 移动版 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" />

Answer 1

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

编辑：我刚刚注意到您正在使用的媒体查询代码，并且我注意到您在使用 javascript 和 时使用了不同的路径：css/style_mob.css。 ./css/style_mob.css。这是一个错字还是可能是它不起作用的原因？

Answer 2

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

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

另外，您在问题中提到最好完全拥有一个单独的域。我说不一定。您只想为每个平台拥有 1 个域名的原因有很多。 @media 查询和响应式网页设计可以发挥很大作用。
如果您对这个主题感兴趣，您一定要查看这篇文章分开列出一个清单。它可以让您了解可能性是什么。

编辑：

如果它仍然不起作用（看起来不起作用）那么也许您应该测试您的用户代理代码。
不要为每个人加载 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 或类似的东西一起使用？

Answer 3

我找到了解决 Android 浏览器除非刷新页面否则无法加载移动 CSS 样式表问题的解决方法。我称这是一个解决方案，而不是一个永久的解决方案，因为我有一个网站，android在第一次尝试时加载移动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" />

“handheld”允许较旧的手机加载 mobile.css

“only screen and (max-width: 480px)”强制 Android 设备在宽度为 480px 时在第一次尝试时加载 mobile.css或更少。

“only screen and (max-device-width: 480px)” 允许新的黑莓手机、iPhone 和通常的 Android 设备加载 mobile.css（如果它们的宽度为 480px 或更小）

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

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