首页js实现网页是电脑访问时，html引用css1文件设置css，是手机访问时引用css2文件设置css

js实现网页是电脑访问时，html引用css1文件设置css，是手机访问时引用css2文件设置css

时间: 2024-02-23 19:59:50 浏览: 57

可以使用 JavaScript 判断设备类型，然后动态加载不同的 CSS 文件来实现这个需求。以下是一个示例代码： ```javascript // 判断设备类型 function detectDeviceType() { return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ? 'mobile' : 'desktop'; } // 动态加载 CSS 文件 function loadCSS(filename) { var link = document.createElement("link"); link.setAttribute("rel", "stylesheet"); link.setAttribute("type", "text/css"); link.setAttribute("href", filename); document.head.appendChild(link); } // 根据设备类型加载不同的 CSS 文件 if (detectDeviceType() === 'mobile') { loadCSS('css2.css'); } else { loadCSS('css1.css'); } ``` 在上述代码中，`detectDeviceType()` 函数用于判断设备类型，如果是移动设备则返回 `'mobile'`，否则返回 `'desktop'`。`loadCSS()` 函数用于动态加载 CSS 文件，接收一个文件名作为参数，并将一个 `<link>` 元素添加到 `<head>` 中。最后，在页面加载时，我们可以根据设备类型动态加载不同的 CSS 文件。如果是移动设备，则加载 `css2.css`，否则加载 `css1.css`。

阅读全文