无法直接读取移动端精确电量，但可通过prefers-reduced-motion、定时器漂移、visibilitychange等信号识别省电模式，并结合deviceMemory和屏幕分辨率分级降级动效与渲染。
目前无法在纯 H5 中直接、可靠地读取移动端设备的精确剩余电量百分比或实时充电状态。Battery API（navigator.getBattery()）已在主流浏览器中被逐步弃用或限制：Chrome 从 120 版本起默认禁用，Safari 从未支持，Android WebView 和 iOS WKWebView 均返回 undefined 或抛出权限错误。所谓“检测电量”实际只能间接感知系统级节电行为，并据此做体验降级。
识别省电模式的可行方式
虽然拿不到电量数字，但可捕获系统或浏览器主动启用节电策略时暴露的信号：
-
监听节电偏好媒体查询：
window.matchMedia('(prefers-reduced-motion: reduce)')在 iOS/macOS 开启低电量模式、Windows 启用省电计划、部分 Android 系统节能时会自动触发为true；这是目前最稳定、跨平台支持最好的信号源 -
检查定时器精度劣化：在省电模式下，
setTimeout和setInterval实际间隔会被拉长（如设 100ms 却延迟 500ms+）。可启动一个轻量校准循环，对比performance.now()与预期时间差，持续偏差 >200ms 可视为节电介入 -
观察页面可见性与后台行为：
document.hidden结合visibilitychange事件，在锁屏或切后台后若发现动画帧率骤降、requestAnimationFrame被暂停、音频自动静音，也侧面反映系统已进入低功耗调度状态
自动精简动效的具体策略
检测到节电信号后，应立即关闭非核心视觉反馈，避免强行渲染加剧耗电：
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
-
停用 CSS 动画与过渡：给
添加class="low-power"，CSS 中统一禁用：.low-power * { animation: none !important; transition: none !important; } -
降级 JS 驱动动画：将
requestAnimationFrame替换为requestIdleCallback（仅在空闲时段更新），或对 Canvas/粒子等高开销逻辑设置帧率上限（如强制 ≤ 15fps） - 隐藏装饰性元素：模糊背景、渐变遮罩、视差滚动、微交互动画等非功能必需项，统一通过 class 控制 display:none
结合设备能力做前置分级
电量不可测，但设备性能可预判。利用 navigator.deviceMemory（兼容 Chrome/Edge/Android WebView）辅助决策：
- 若存在且 ≤ 1（约 1GB 内存），默认启用精简模式，不依赖等待节电信号触发
- 若不存在（如 Safari），fallback 到
screen.width × screen.height总像素数：≤ 1280×720 视为低性能设备，同步降级 - 搭配
CSS.supports('color', 'display: contents')检查布局能力，对不支持现代特性的旧机型直接跳过复杂动效
注意边界与 fallback
所有检测都需容错设计：
- 不要依赖单个信号，组合判断（如 prefers-reduced-motion + deviceMemory + 定时器漂移）提升鲁棒性
- 避免在页面加载初期就执行 heavy check，建议在 DOM ready 后延迟 300ms 再启动检测，避开首屏关键路径
- 用户手动关闭节电模式后，需监听
change事件恢复动效，但不要自动回切——可提供“恢复动画”按钮由用户确认
