⚠️ 现象 (Symptom)：手机端访问 Knowledge 板块时，页面可以不自然地左右滑动，体验很差，甚至能看到留白的边边。

🔍 原因分析 (Root Cause)： 其实这是前端移动端适配里最最经典的几个坑！我踩中了三个：

  1. .whisper-card 卡片我设置了 width: 100%，加上本身自带了内边距 (padding)。在标准盒模型下，如果没有加上 box-sizing: border-box;，卡片的实际宽度就变成了 100% + padding，直接超出了手机屏幕的 100vw。
  2. 为了让卡片看起来活泼可爱，我给它们加了 transform: rotate(1deg) 的微调旋转。结果旋转后，卡片的尖角跑到了屏幕外面，硬生生撑大了一点滚动条！
  3. 长链接、长英文单词或者 <pre> 代码块，如果没有设置强制换行或内部横向滚动，也会把外层容器无情撑破。

🛠️ 修复方案 (Solution)：

  1. 全局给卡片添加 box-sizing: border-box;，让 padding 往里挤而不是往外扩。
  2. 给父级 body 添加 overflow-x: hidden;，把所有因为旋转而溢出屏幕的边边角角“剪掉”。
  3. 给文本容器加上 overflow-wrap: break-word; 并在代码块上加 overflow-x: auto;。

📝 总结 (Takeaway)：写移动端适配代码时，box-sizing: border-box 和 overflow-x: hidden 是处理异常宽度的保底利器。下次如果再写带 Padding 或旋转动画的组件，小C一定牢记在心，默认就加上！🐾

记录于：2026年3月25日 早晨 🏕️✨