基于浏览器的Javascript样式表切换
我目前正试图为一个使用的客户端编辑一个网站，如果用户是从手机上浏览的话，它就会使用不同的样式表。移动电话样式表要简单得多，并去掉背景图像和样式，以减少加载时间。我知道这将是更好的做法，有一个完全分开的移动网站，但这是不实用的客户，因为他需要能够更新他的网站内容使用贡献。
这已经在一些设备上工作了，比如iPhone (上次我测试的时候！)但在我的Android手机上，我有一个奇怪的问题。当我访问URL或单击链接时，它会使用默认样式表显示网站。如果我刷新页面，它就决定显示用移动样式表呈现的站点。在我单击refresh之前，我的代码几乎没有接收到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；Android2.1-update1；en-gb；Touch_G2_Touch Build/en 27) AppleWebKit/530.17 (KHTML，类似Gecko)版本/4.0MobileSafari/530.17
编辑：
我要补充的是，我尝试过使用媒体查询，但这在iPhone或安卓系统上都不起作用。上面的代码可以在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" />Stack Overflow用户
发布于 2011-04-07 13:56:59
手机浏览器缓存页面就像桌面浏览器一样。在花太多时间研究这个问题之前，请确保这不是缓存问题。
清除您手机上的缓存并再次访问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);
}清除缓存并测试它。它是第一次加载css，还是加载没有样式的页面？
如果没有第一次加载，这可能意味着javascript代码没有按时运行。你怎么称呼它？在头部吗？你是在用jQuery和$(document).ready或者类似的东西吗？
https://stackoverflow.com/questions/5582182
复制相似问题
腾讯云开发者
