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，像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来确定浏览器必须使用哪种样式表？检查单个用户代理似乎是错误的方法。

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

Answer 2

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

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

此外，您在提问时提到最好完全拥有一个单独的域名。我不一定说。有很多原因可以解释为什么您只希望每个平台都有1个域名。 @media查询和响应式网页设计可以很好地实现。如果您对该主题感兴趣，请务必从A列表中查看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或类似的东西？

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" />

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

“only screen and（max-width：480px）”强制Android设备在第一次尝试时加载mobile.css，如果它们的宽度为480px或更低。

“仅屏幕和（max-device-width：480px）”允许新的黑莓手机，iphone和USUALLY 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]-->

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

3 个答案: