用于 android 的单独 CSS 样式答案

【问题标题】：separate css style for android用于 android 的单独 CSS 样式
【发布时间】：2013-12-18 18:04:09
【问题描述】：

我正在创建我的网站的移动版本。

我已将这些代码与屏幕尺寸相关的 css 一起使用：

<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" href="phone.css" /> <link type="text/css" rel="stylesheet" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)" href="pad.css" />

现在这些 css 代码适用于 iphone、ipod touch 甚至 ipad。由于设备的屏幕宽度，在我的 android (samsung Galaxy y) 上测试此页面横向会阻止大部分设计。有没有办法添加另一个链接类型代码但针对 android 用户？甚至任何其他的iOS？

所以我可以将它们的代码更改为自动以适应它运行的所有设备？（注意我知道可以在任何人声明之前使用上面列出的 2 个 css 选择 auto。但它看起来不正确，因此我想要第三个 css 页面）。

【问题讨论】：

标签： css mobile styles

【解决方案1】：

我不知道我是否正确理解了你的问题，但如果我理解了，应该这样做：

var userAgent = navigator.userAgent.toLowerCase(); //get the user agent
var android = (userAgent.indexOf("android") != -1);
if(android) { //if client is running Android
    document.head.innerHTML += "<link.../>"; //add an Android-specific stylesheet
}
else {
    document.head.innerHTML += "<link.../>"; //use the regular stylesheet otherwise
}

注意：你必须先删除你的<link>s，然后让JavaScript添加它们。

【讨论】：

好的。谢谢，但我已将其添加到我的页面中，但它仍在阅读 phone.css 而不是 other.css（这是我想用于除 ios 之外的任何东西。）基本上没有 media="android" 命令吗？
不幸的是没有。让我更详细地更新我的答案。
@KevHopwood 好的，添加了一些注释。请查看更新的答案。
是的，好的。我已经输入了这个 '' 但它不起作用。
@KevHopwood 您必须在document.head.innerHTML += 部分中添加整个link 标签。比如：document.head.innerHTML += "<link href = 'other.css' rel = 'stylesheet' type = 'text/css'/>";