1

有一个网站引用 .js 文件和 .css 文件来格式化和添加动态元素到其页面。该网站提供了引用我自己在 google 代码存储库中托管的那些 .js 和 .css 文件版本的选项，然后将使用这些文件。

我正在尝试添加另一个用于移动浏览的 css 文件。目前我在当前的 css 中使用 @media 参数，但我想要两个单独的 css 文件。

是否有一些代码可以添加到我的 .js 文件中来覆盖 html，例如：

<html>
 <head>
  <link href="desktop.css" ...

变成：

<html>
 <head>
  <link href="mobile.css" ...

当 JS 检测到移动浏览器时。请记住，在 HTML 中进一步引用了 js 文件。

谢谢！

4

3 回答 3

1

请试试这个

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
        document.write('<link rel="stylesheet" type="text/css" href="mobile.css">');
    }
    else {
        document.write('<link rel="stylesheet" type="text/css" href="desktop.css">');
    }

是的，使用 CSS查询是一个好习惯@media

于 2013-02-13T00:57:00.123 回答
1

@import您可以对规则使用媒体查询：

<link href="master.css" …

@import url(desktop.css) (min-width:800px);
@import url(mobile.css) (max-width:700px);
于 2013-02-13T01:17:44.137 回答
0

是否有一些代码可以添加到我的 .js 文件中来覆盖 html？

当然，您可以覆盖 html，但有什么意义呢？为时已晚，浏览器已经加载并应用了 desktop.css。

如果您想维护两个单独的 css 文件，您需要做的是删除您的静态链接标签，并根据浏览器检测动态应用正确的样式表：

var stylesheet=document.createElement("link");
stylesheet.type="text/css";
stylesheet.rel="stylesheet";
if (// detect mobile browser) {
    stylesheet.href=mobile.css;
}
else {
    stylesheet.href=desktop.css;
}
document.head.appendChild(stylesheet);
于 2013-02-13T01:29:16.157 回答