无法直接读取移动端精确电量，但可通过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 事件恢复动效，但不要自动回切——可提供“恢复动画”按钮由用户确认