本教程详细介绍了如何结合 `current-device.js` 库与 JavaScript，实现对 CSS 样式的动态控制，从而根据不同的设备类型（如平板或移动设备）应用特定的样式规则。文章将指导读者通过 JavaScript 检测设备，并动态注入 CSS 样式表，以解决传统 CSS 媒体查询在复杂设备识别场景下的局限性，确保精确的设备适配和用户体验优化。
在现代前端开发中，为不同设备提供优化的用户体验至关重要。虽然 CSS 媒体查询是实现响应式设计的强大工具，但在某些复杂场景下，仅依靠屏幕宽度和方向等属性可能无法精确识别设备类型。例如，一个尺寸较小的笔记本电脑可能在某些媒体查询条件下被误判为平板设备，或者特定平板设备可能不符合预期的宽度范围。
current-device.js 是一个轻量级的 JavaScript 库，它能够准确检测访问页面的设备类型（如移动设备、平板、桌面设备），操作系统，以及浏览器等信息。结合 current-device.js 的设备检测能力与 JavaScript 动态操作 DOM 的特性，我们可以实现更加精细和准确的设备特定 CSS 样式控制。
为什么需要动态注入 CSS？
传统的 CSS 媒体查询通常基于视口宽度、高度、分辨率或方向等物理属性。然而，当我们需要根据设备的 逻辑类型（例如“这是一个平板电脑”而不是“视口宽度在 768px 到 1024px 之间”）来应用样式时，媒体查询就显得力不从心。
立即学习“前端免费学习笔记（深入）”；
current-device.js 通过在 JavaScript 中提供 device.mobile(), device.tablet(), device.desktop() 等方法，使得这种逻辑判断成为可能。一旦我们通过 JavaScript 识别了设备类型，就可以决定是否应用特定的 CSS 规则。对于复杂的 CSS 片段，直接在 JavaScript 中动态创建并注入样式表是一种灵活且强大的方法。
步骤一：引入 current-device.js 库
首先，确保你的项目中已经引入了 current-device.js 库。你可以通过 CDN、npm 包管理器或直接下载文件的方式引入。
通过 CDN 引入：
<script src="https://cdn.jsdelivr.net/npm/current-device@0.10.2/umd/current-device.min.js"></script>
通过 npm 引入（并打包）：
npm install current-device
然后在你的 JavaScript 文件中导入：
import device from 'current-device';
步骤二：检测设备类型并动态注入 CSS
在 current-device.js 引入并初始化后，你可以通过 device 对象访问各种设备检测方法。以下示例展示了如何检测设备是否为平板电脑，并针对平板设备在横屏模式下应用屏幕旋转的 CSS 规则。
// 确保 DOM 完全加载后再执行脚本
document.addEventListener('DOMContentLoaded', () => {
// 使用 current-device.js 检测设备是否为平板电脑
if (device.tablet()) {
// 创建一个新的 <style> 元素
const newStyleSheet = document.createElement('style');
// 将 <style> 元素添加到文档的 <head> 中
document.head.appendChild(newStyleSheet);
// 获取新创建的样式表对象
const sheet = newStyleSheet.sheet;
// 定义需要动态注入的 CSS 规则
// 这是一个用于在横屏模式下强制旋转 HTML 内容的 CSS 片段
const cssRule = `
@media screen and (orientation: landscape) {
html {
transform: rotate(-90deg);
transform-origin: left top;
width: 100vh;
overflow-x: hidden;
position: absolute;
top: 100%;
left: 0;
}
}
`;
// 将 CSS 规则插入到样式表的顶部 (索引 0)
// 注意：这里将原始的媒体查询保留在注入的 CSS 规则内部，
// 以便在平板设备上，该规则只在横屏时生效。
sheet.insertRule(cssRule, 0);
console.log('平板设备检测到，并已注入屏幕旋转 CSS 规则。');
} else if (device.mobile()) {
// 如果是手机设备，你可能也想应用类似的逻辑
// 例如，针对手机的特定样式
console.log('移动设备检测到，但未注入平板专用CSS。');
// 可以添加针对移动设备的 CSS 注入逻辑
} else {
console.log('桌面设备检测到。');
}
});代码解析：
- document.addEventListener('DOMContentLoaded', ...): 确保脚本在 DOM 结构完全加载后执行，避免操作尚未存在的元素。
- if (device.tablet()): 这是 current-device.js 提供的核心检测方法。它返回一个布尔值，指示当前设备是否为平板电脑。
- document.createElement('style'): 创建一个新的
- document.head.appendChild(newStyleSheet): 将新创建的
- newStyleSheet.sheet: 获取刚刚创建的
- sheet.insertRule(cssRule, 0): 这是关键一步。它将一个 CSS 规则字符串插入到样式表中的指定位置。cssRule 是我们要应用的 CSS 代码，0 表示将其插入到样式表的第一个位置，使其具有较高的优先级（但仍受 CSS 特异性规则影响）。
注意事项与最佳实践
CSS 特异性 (Specificity)：动态注入的 CSS 规则同样遵循 CSS 特异性原则。如果你的页面中已有更高特异性的规则，动态注入的规则可能不会生效。确保你的动态规则足够具体，或者使用 !important (谨慎使用) 来覆盖现有样式。
性能考量：对于少量的 CSS 规则，动态注入的性能开销可以忽略不计。但如果需要注入大量复杂的 CSS，考虑其对页面渲染和性能的影响。
何时注入：通常建议在 DOMContentLoaded 事件触发后执行设备检测和 CSS 注入，以确保所有必要的 DOM 元素都已准备就绪。
-
替代方案：使用 current-device.js 提供的 CSS 类： current-device.js 默认会在 html> 标签上添加表示设备类型的 CSS 类，例如 .mobile, .tablet, .desktop, .ios, .android 等。对于只需要根据设备类型简单切换样式的场景，你可以直接在 CSS 中利用这些类，而无需动态注入。
<!-- current-device.js 会自动添加类，例如： --> <html class="desktop os-windows browser-chrome">
/* 在 CSS 中直接使用这些类 */ .tablet.orientation-landscape body { /* 针对平板横屏的样式 */ } .mobile .header { /* 针对手机的头部样式 */ }然而，对于像示例中那样需要包含 @media 查询的复杂规则，或者需要更精细控制何时应用这些规则的场景，动态注入仍然是更灵活的选择。
总结
通过 current-device.js 结合 JavaScript 动态注入 CSS，我们能够实现比传统 CSS 媒体查询更精确和灵活的设备特定样式控制。这种方法特别适用于需要根据设备的逻辑类型（而非仅仅物理尺寸）来应用复杂样式规则的场景，例如本教程中展示的平板设备横屏旋转功能。合理利用这种技术，可以显著提升应用程序在不同设备上的用户体验和适配性。
