Question

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

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

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

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

变成：

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

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

谢谢！

Answer 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查询

是good practice

Answer 2

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

<link href="master.css" …

@import url(desktop.css) (min-width:800px);
@import url(mobile.css) (max-width:700px);

Answer 3

是否有一些我可以添加到我的.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);

覆盖html行的Javascript函数

3 个答案: