HTML中meter数值显示 HTML中meter标签在电池电量显示中的应用

<meter> 标签的 value 属性只接受数字，不支持百分比字符串；需显式设置 min 和 max 才能使 low/high/optimum 生效；跨浏览器样式需 CSS 伪元素或降级方案；无障碍必须用 aria-label 或隐藏文本补充语义。

meter 标签不支持百分比字符串值，必须用 number 类型

直接写 <meter value="85%"> 会失效——value 属性只接受数字，浏览器会忽略带 % 的字符串，回退到 0 或默认值。电池电量这种场景，后端或 JS 传来的数据常是字符串（如 "85" 或 "0.85"），得先转成 number 再塞进去。

实操建议：

• JS 中统一用 parseFloat() 或一元加号 +value 转换，避免 parseInt("85%") 返回 85 却掩盖了单位污染风险
• 如果后端返回的是小数（如 0.82），别直接赋给 value，要乘以 100 并确保在 min/max 范围内（默认是 0–100）
• 服务端渲染时，模板里也得做数值清洗，比如 Nunjucks 中写 <meter value="{{ battery | float * 100 }}">

low/optimum/high 属性必须配合 min/max 才有意义

只设 low="20" high="80" 不生效，因为 meter 默认 min="0" max="100"，但浏览器不会自动推断——你得显式写出 min 和 max，否则 low/high 被忽略，所有值都显示为“正常”色（通常是绿色）。

电池场景典型配置：

立即学习“前端免费学习笔记（深入）”；

<meter value="72" min="0" max="100" low="20" high="80" optimum="60"></meter>

注意：optimum 是“最理想值”，不是“中间值”；设成 60 表示 60% 是电池健康使用区间，低于 20% 显红色、20–80% 显绿色、高于 80% 显黄色（各浏览器默认样式略有差异）。

Chrome/Firefox 对 meter 样式支持不一致，别依赖默认颜色

Firefox 目前完全不支持 low/high/optimum 的视觉反馈，所有值都显示同一色块；Chrome 支持但颜色策略不同（比如高电量在 Chrome 是黄，在 Safari 可能偏橙）。纯靠 HTML 属性无法跨浏览器统一电池状态视觉表现。

稳妥做法：

• 用 CSS 自定义 meter::-webkit-meter-bar、meter::-webkit-meter-optimum-value 等伪元素（仅 WebKit）
• 对 Firefox 和旧 Edge，降级为用 data-status 属性 + class 控制背景色，例如：<meter value="15" data-status="critical"></meter>，再配 CSS meter[data-status="critical"] { background: #f00; }
• 若需精确控制，干脆不用 meter，改用 progress + 额外 span 显示文字提示，更可控

屏幕阅读器对 meter 的支持有限，电量场景必须补充文本说明

meter 的 ARIA 支持很弱：NVDA 和 VoiceOver 多数只读出 “meter” 和当前值，不读 low/high 含义，更不会主动说“电量低”。用户听不到“危险”“充足”这类语义，只听到“72”，毫无上下文。

补救方式只有两个有效选项：

• 加 aria-label，如 <meter value="12" aria-label="电池电量 12%，严重不足"></meter> —— 值变动时需 JS 同步更新该属性
• 在 meter 旁放一个实时同步的 <span class="visually-hidden">电量剩余 12%，请尽快充电</span>，用 CSS 隐藏但保留给读屏器读取

别指望 title 属性，它只在悬停时触发，对键盘和读屏用户无效。