如何借助CSS为移动端页面在静止状态下设置省电模式色调？
移动端页面无法触发系统省电模式，CSS仅能响应已启用的省电状态以降低屏幕功耗；目前无任何CSS媒体查询可直接检测省电模式，深色背景省电仅适用于OLED/AMOLED屏。
移动端页面本身无法触发系统级省电模式，CSS 也不能“设置”省电模式——它只能响应系统已启用的省电状态，并据此调整视觉表现，降低屏幕功耗（比如减少亮色面积、避免纯白背景、抑制高亮动画）。真正的省电由系统控制，网页能做的只有配合。
prefers-reduced-data 和 prefers-contrast 不是省电开关
有人误以为 prefers-reduced-data 或 prefers-contrast 媒体查询能反映省电模式，但事实并非如此：
• prefers-reduced-data 在主流浏览器中尚未标准化，Chrome/Firefox/Safari 均不支持；
• prefers-contrast 只反映用户是否开启高对比度辅助设置，与电池无关；
• 目前**没有任何 CSS 媒体查询能直接检测系统是否处于省电模式**（Android 的“Battery Saver”、iOS 的“Low Power Mode”均未暴露给 Web API）。
真正可用的省电友好适配策略
虽然不能监听省电模式，但可通过以下方式让页面在静止状态下天然更省电：
• 使用深色背景：将 body 背景设为 #121212 或更暗的值，OLED 屏幕可显著降低像素功耗；
• 避免纯白：#ffffff 在 OLED 上耗电最高，改用 #1a1a1a 或 hsl(0, 0%, 10%) 更稳妥；
• 关停非必要动画：对 @keyframes 和 transition 使用 @media (prefers-reduced-motion: reduce) 降级；
• 禁用自动播放视频/音频：即使静音，解码仍耗电，应设 preload="metadata" + autoplay="false"；
• 图片懒加载：用 loading="lazy" 防止页面初始加载大量资源。
theme-color + color-scheme 协同降低显示功耗
这两者虽不等于省电模式，但能强化省电感知和系统协同：
• 在 <head> 中声明：<meta name="theme-color" content="#121212">，让 Android 地址栏变黑（仅 Chromium 系列生效）；
• 同时加 :root { color-scheme: dark; }，使表单、滚动条等原生控件自动走深色渲染路径；
• 注意：若页面已有自定义颜色（如 input { background: white; }），color-scheme 不会覆盖它——必须手动重写；
• iOS 完全忽略 theme-color，但 color-scheme: dark 在 Safari 15.4+ 已支持，可影响滚动条和表单默认样式。
立即学习“前端免费学习笔记（深入）”；
最易被忽略的是：深色背景省电效果只在 OLED/AMOLED 屏上成立，LCD 屏反而可能因背光常亮而更耗电。别盲目全站套黑，先确认目标设备类型；另外，theme-color 必须是静态声明，JS 动态修改无效——这个细节翻车率极高。
