javascript - 基于浏览器使用 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-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" />

Answer 1

你不能使用 media queries确定浏览器必须使用什么样式表？检查单个用户代理似乎是错误的方法。

编辑:我刚刚注意到您正在使用的媒体查询代码，并且我注意到您使用的是不同的路径:css/style_mob.css 在使用 javascript 和 ../css/style_mob.css。这是打字错误还是无法正常工作的原因？