必须用包裹容器（如）承载transform，而非直接作用于；包裹容器需设display: inline-block或width: fit-content；transform-origin应设为top left；加translatez(0)触发gpu加速提升文字清晰度；响应式缩放需结合容器约束、缩放与滚动兜底。

transform: scale() 必须作用在表格容器上，不能直接写在 <table> 标签里 <p>直接给 <code><table id="summary-table"> 加 <code>transform: scale(0.8) 看似合理，但实际会破坏表格的块级流行为——缩放后它仍占据原始宽度，导致横向溢出或滚动异常。正确做法是把 <table> 包进一个 <code><div class="table-wrapper">，再对这个 wrapper 应用 transform。 <p>常见错误现象：表格缩放后右侧被截断、滚动条失效、<code>width: 100% 失效。

• 必须用包裹容器（如 <div>）承载 transform，而非直接作用于 <code><table> <li>包裹容器需设 <code>display: inline-block 或 width: fit-content，否则缩放不生效或撑满父宽
• 若用 width: 100% 在 wrapper 上，scale 会失效——它先按 100% 宽度布局，再缩放，视觉上没变化

transform-origin 不设就是坑，尤其在居中布局时

transform-origin 默认是 50% 50%（中心点），但表格缩放后常整体偏移、被裁切。比如你希望表格左上角不动，只往右下方向缩小，就必须显式设为 top left。

使用场景：表格嵌在居中容器（margin: 0 auto）里，缩放后位置偏移；或固定定位表格需要锚定某角。

• 缩放时未设 transform-origin → 表格视觉中心位移，可能跑出视口
• 设 transform-origin: center → 缩放后左右/上下留白不均，响应式布局易错位
• 推荐统一用 transform-origin: top left，再配合 margin: 0 auto 实现居中缩放

缩放后文字模糊？加 translateZ(0) 触发 GPU 加速

Chrome 和 Edge 在 Windows 上对 scale() 渲染文字常有锯齿或发虚，尤其小字号（如 12px）表格。这不是 bug，是浏览器默认用 CPU 渲染 2D 变换，抗锯齿弱。


使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载

性能影响：加 translateZ(0) 会让浏览器启用硬件加速，轻微增加内存占用，但换来清晰度提升和动画更流畅。

• 只加在缩放元素及其子元素上：#summary-table, #summary-table th, #summary-table td
• 不要滥用：整个页面都加会导致 GPU 负载升高，移动端发热明显
• 注意兼容性：translateZ(0) 在 IE11 和旧 Safari 需前缀 -webkit-transform: translateZ(0)

响应式缩放要分层控制，别只靠媒体查询调 scale

单纯在 @media (max-width: 768px) 里把 scale 从 1.0 改成 0.75，容易导致小屏下表格过小、点击区域难触达。真正可靠的响应式缩放，得结合容器约束 + 缩放 + 滚动兜底。

容易踩的坑：缩放比例设太小（如 0.6），用户无法看清单元格内容；设太大（如 1.3），表格横向溢出且无滚动。

• 移动端优先设 .container { overflow-x: auto }，确保缩放后可横向拖拽
• 搭配 padding-bottom: 20px 防止缩放后底部被 fixed 元素遮盖
• 避免在 media query 中仅改 scale —— 建议同步微调 font-size（如用 rem）和 padding，让可读性不崩
缩放不是调个数字就完事。原点选错、容器没包、GPU 没触发、响应式没兜底——任何一个环节漏掉，都会让表格看起来“怪怪的”，而问题又很难一眼定位。