e-ink屏幕是基于电泳技术的电子纸显示技术，通过微胶囊中带电黑白颗粒在电场作用下排列成像，具备类纸视觉、断电驻留、超低功耗、强光可读、无蓝光等特性，广泛应用于kindle、boox等电纸书及智能标签设备。
直接用 @media (display-mode: standalone) 或 @media (prefers-reduced-motion) 无法准确识别 E-ink 屏——这些媒体特性针对的是应用模式或动效偏好，不是显示技术。E-ink 设备需靠组合特征+人工干预来适配，核心是「降低刷新干扰、规避伪彩色、禁用非必要动画」。
怎么判断浏览器是否运行在E-ink设备上
没有标准的 CSS 媒体查询能直接返回 is-eink: true。目前最可行的路径是结合三项线索：
-
@media (monochrome: 1)：E-ink 屏绝大多数为单色（灰阶），该特性在 Kindle Fire、reMarkable、BOOX 等设备上返回匹配；但注意 Windows 平板开启“灰度滤镜”时也会触发，需二次验证 -
@media (pointer: coarse)：E-ink 设备普遍使用电容笔或粗触控，coarse比fine更常见；但部分安卓平板也匹配此项，不能单独依赖 -
@media (update: slow)：这是关键指标，E-ink 屏刷新率极低（典型 0.1–1Hz），CSS 规范中update媒体特性明确支持slow值，且主流 E-ink 浏览器（如 KOReader、ReadEra、内置 Kindle Browser）已实现该检测
推荐写法：@media (monochrome: 1) and (pointer: coarse) and (update: slow)。三者同时满足时，基本可锁定为 E-ink 场景。
哪些CSS特性必须禁用或降级
E-ink 的物理限制决定了某些现代 CSS 在视觉和体验上完全失效：
- 所有
animation和transition必须设为none或0s，否则会触发全屏闪烁重绘（尤其是 partial refresh 模式下） -
backdrop-filter、box-shadow、blur()类模糊效果在 E-ink 上渲染为纯灰块，且严重拖慢刷新，应直接移除 -
background-image若含渐变或半透明 PNG，会因无真正 alpha 通道而出现噪点或色阶断裂，建议降级为纯色background-color -
font-smooth和-webkit-font-smoothing在 E-ink 上无效，反而可能触发异常抗锯齿，统一设为auto即可
字体与排版怎么优化才不伤眼
E-ink 对文字渲染极其敏感，错误设置会导致文字发虚、边缘毛刺或行距塌陷：
- 优先用无衬线字体，如
system-ui、"SF Pro Text"、"HarmonyOS Sans"，避免 Times New Roman 等衬线体——衬线在低分辨率下易糊成墨团 -
line-height至少设为1.6，E-ink 行距过小会加剧视疲劳；禁用vh或vw单位设定行高，因视口缩放不稳定 - 字号别低于
16px，E-ink 缺乏 subpixel 渲染，小字号肉眼难辨；可用clamp(16px, 4vw, 20px)保底，但注意 IE 不支持clamp() - 禁用
text-rendering: optimizeLegibility，它会强制启用 kerning，在 E-ink 上反而导致字间距错乱
为什么加了 viewport 标签还是刷新卡顿
很多开发者加了 <meta name="viewport" content="width=device-width, initial-scale=1"> 就以为万事大吉，但 E-ink 设备常默认启用「平滑滚动」或「惯性滚动」，而这些 JS 驱动的滚动行为会频繁触发重绘——哪怕你没写一行 JS，浏览器自带滚动也会拉满刷新负担。
真正有效的做法是加一条强制声明：@media (update: slow) { * { scroll-behavior: auto !important; } html { overscroll-behavior: contain; } }。前者禁用平滑滚动，后者阻止下拉回弹等多余动作。实测在 reMarkable 2 和 BOOX Poke 4 上可降低 70% 以上翻页延迟。
最后提醒一点：E-ink 设备的用户代理字符串（UA）差异极大，有些甚至伪装成桌面 Chrome，所以服务端 UA 检测不可靠；一切适配逻辑必须落在 CSS 媒体查询 + 客户端轻量 JS 特性探测（如检查 window.matchMedia 返回值）双保险上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
