电子墨水屏需用最简viewport、禁用子像素抗锯齿、用1dppx/monochrome媒体查询、纯黑白图片与背景、禁用圆角和过渡动画。
电子墨水屏的 viewport 设置要禁用缩放干预
电子墨水屏（如 Kindle、reMarkable、Onyx Boox）普遍不支持用户缩放，且系统级缩放逻辑与 LCD 屏完全不同。写 maximum-scale=1 或 user-scalable=no 不仅无效，还会在部分固件中触发渲染 fallback（比如强制降级为 bitmap 渲染），导致文字锯齿加剧。真正有效的做法是只保留最简 viewport：<meta name="viewport" content="width=device-width, initial-scale=1">，并确保它位于 中第一个非注释节点——任何 SSR 占位符或注入脚本前置都会让该标签被忽略。
字体渲染必须绕过 subpixel antialiasing
电子墨水屏无 RGB 子像素，但现代浏览器（尤其是 Chromium 内核 WebView）默认启用 subpixel rendering，结果是文字边缘发虚、笔画粘连。需强制关闭：
body { -webkit-font-smoothing: none; text-rendering: optimizeLegibility; }- 对关键文本容器追加
paint-order: stroke; stroke-width: 0.5px;（部分设备支持 SVG 文本描边强化） - 避免使用
font-weight: 300或细体字族；优先选用font-family: "HarmonyOS Sans", "Noto Sans CJK SC", sans-serif;这类专为高对比度优化的字体
媒体查询不能依赖像素宽度断点
电子墨水屏的 CSS 像素与物理像素 1:1 映射，但设备报告的 device-width 常被固件四舍五入（如 1080px 报成 1072px），导致 @media (min-width: 1024px) 在 1072px 设备上不命中。更可靠的方式是：
- 用
@media (resolution: 1dppx)区分墨水屏（固定为 1dppx）和 LCD 屏（通常 ≥1.5dppx） - 针对墨水屏单独写规则：
@media (monochrome) and (display-mode: standalone) { ... } - 放弃 px 断点，改用
clamp(1rem, 2.5vw, 1.25rem)配合rem基准，让字号随视口宽度线性变化而非阶梯跳变
图片与背景色必须做纯黑白阈值处理
墨水屏只能显示灰阶（通常 16 级或 4 级），任何中间灰度（如 #ccc）都会被固件抖动算法强行映射，造成大面积噪点。实际操作中：
- 所有背景色限定为
#ffffff或#000000；禁用rgba()和透明度 - 图片必须预处理：导出为 1-bit BMP 或 PNG-8（索引色，仅含 #000000 / #ffffff）；
<img src="chart-bw.png" style="max-width:90%" style="max-width:90%">后加style="image-rendering: pixelated;"防插值模糊 - CSS 边框用
border: 1px solid #000;，禁用border-radius（圆角在墨水屏上渲染为阶梯状锯齿）
最常被忽略的是：墨水屏没有“刷新率”概念，每次重绘都是全屏闪屏。所以任何依赖 transition 或 opacity 的交互动效都必须彻底禁用，否则会引发不可预测的残影和卡顿。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
