Kindle设备完全不支持HTML5 <video> 标签，因其浏览器基于老旧WebKit分支，未实现HTMLMediaElement接口；实际表现为视频元素不渲染、document.querySelector('video') 返回null、布局错乱；应改用<img>+alt+文字描述降级兜底。
Kindle 设备根本不支持 <video> 标签，所谓“位置异常”实际是视频根本没渲染——不是布局问题，是功能缺失。
为什么 Kindle 上视频不显示或错位
Kindle（包括 Paperwhite、Oasis、Scribe 等主流型号）的内置浏览器基于老旧 WebKit 分支，完全不支持 HTML5 <video>，也不解析 poster、controls 或 preload 等属性。部分固件会把 <video> 标签当作未知内联元素处理，导致行内流错乱、文字换行异常、甚至整段内容塌陷。
- 错误现象：
TypeError: undefined is not an object (evaluating 'video.play')不会出现——JS 甚至拿不到video元素（document.querySelector('video')返回null） - 真实表现：页面空白、文字挤在左上角、CSS
position: absolute失效、display: block被忽略 - 兼容性本质：不是“跨终端适配不足”，而是 Kindle 浏览器连
HTMLMediaElement接口都未实现
替代方案：用静态图 + 文字说明兜底
必须放弃在 Kindle 上播放视频的念头，改用语义化降级。关键不是“怎么修位置”，而是“怎么让内容可读”。
- 用
<picture>或<img>替代<video>，src指向关键帧截图（如demo-frame.jpg） - 添加
alt属性描述视频内容：“演示如何长按重命名文件（共3步）” - 在图片下方用
<p class="video-desc">补充操作步骤，避免纯依赖视觉流程 - 通过
@media (-webkit-device-pixel-ratio: 1)或 UA 字符串检测 Kindle（如包含或 <code>"Kindle"），动态移除<video>并插入<img>
如果必须保留 video 标签结构（如 CMS 输出固定）
靠 CSS 强制隐藏并替换内容，但需注意 Kindle 对 CSS 的支持极弱——仅认 display: none、visibility: hidden 和基础字体/颜色，@supports、Flexbox、Grid 全部无效。
立即学习“前端免费学习笔记（深入）”；
- 给
<video>加style="display:none"（内联样式，外部 CSS 不生效） - 在
<video>后紧跟<img src="..." alt="..." style="display:block; margin:1em auto;"> - 禁用所有 JS 初始化逻辑：
if (/Kindle|Silk/i.test(navigator.userAgent)) { return; } - 绝对不要用
object-fit、aspect-ratio或伪元素生成内容——Kindle 渲染引擎直接跳过
真正麻烦的不是“位置调不准”，而是你花半天调 top 和 transform，结果发现 <video> 根本没被解析成 DOM 节点。Kindle 的“兼容性”不是前端能 hack 出来的，得从内容交付层就切掉视频依赖。
