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

我目前正在尝试为一个使用AdobeContrible的客户端编辑一个网站，因此如果用户使用手机浏览，它将使用不同的样式表。手机样式表简单得多，去掉背景图像和样式以减少加载时间。我知道最好的做法是为手机建立一个完全独立的网站，但这对客户来说并不实际，因为他需要能够使用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>

var userAgent=navigator.userAgent；
if（userAgent.search（“Mobile”）>=0）document.getElementById（“样式表”）.href=“css/style\u mob.css”；
if（userAgent.search（“Nokia”）>=0）document.getElementById（“样式表”）.href=“css/style\u mob.css”；
if（userAgent.search（“SymbianOS”）>=0）document.getElementById（“样式表”）.href=“css/style\u mob.css”；

该脚本仅显示少数设备，但您可以了解大致情况

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

Mozilla/5.0（Linux；U；Android） 2.1-更新1；en gb；T-Mobile_G2_Touch Build/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" />

您不能用它来确定浏览器必须使用的样式表吗？检查单个用户代理似乎是错误的做法

---

编辑：我刚刚注意到您正在使用的媒体查询代码，我注意到您使用的路径不同：

css/style\u mob.css

使用javascript和

。/css/style\u mob.css

。这是一个输入错误还是它不能工作的原因？

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

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

另外，您在问题中提到最好有一个单独的域。我说不一定。为什么每个平台只需要一个域，原因有很多@媒体查询和快速响应的网页设计可以发挥巨大的作用。 如果你对这个主题感兴趣，你肯定应该从一个单独的列表中查看。它可以给你一个关于可能性的想法

编辑：

如果它仍然不起作用（似乎不起作用），那么也许您应该测试您的用户代理代码。 与其为每个人加载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);
}

var normalCss=document.createElement（“”）；
var mobileCss=document.createElement（“”）；
if（userAgent.search（“Android”）>=0）{
document.getElementsByTagName（“head”）[0].appendChild（mobileCss）；
}
否则{
document.getElementsByTagName（“head”）[0].appendChild（normalCss）；
}

清除缓存并进行测试。它是第一次加载css还是加载没有样式的页面

---

如果它没有第一次加载，这可能意味着javascript代码没有按时运行。你怎么称呼它？是在头部吗？您是否将jQuery与

$（document.ready

或类似内容一起使用？

我找到了一个解决办法，解决了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" />

“掌上电脑”允许旧手机加载mobile.css

“仅屏幕和（最大宽度：480px）”强制android设备在第一次尝试时加载mobile.css，如果它们的宽度小于等于480px

“仅屏幕和（最大设备宽度：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]-->

为什么不打印用户代理字符串来帮助识别错误？您尝试过类似的方法吗？这不是真正的问题。我知道这个方法是有效的，但这就是为什么我每次都要刷新Android手机上的页面才能正常工作的原因，这让我感到困惑。我在发布之前已经清除了缓存，这不是问题所在。谢谢你的帖子。我应该在我原来的帖子里加上这个。对不起，谢谢雨果。我在标题中调用Javascript。没有使用jQuery。到目前为止，我还没有尝试创建元素，所以我会尝试一下。如果您仍然没有得到任何结果，请对您的userAgent字符串发出警报并发布该消息！你只是加载了没有样式表Hugo的页面。我已将用户代理字符串附加到我的源