表格内文字不随浏览器缩放的实质是保持物理像素尺寸稳定，但违背可访问性；可行方案是响应系统字体设置而不受临时缩放干扰，可用text-size-adjust禁用自动缩放。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

table内文字不随浏览器缩放的实质问题 浏览器缩放（Ctrl+鼠标滚轮或系统级放大）默认会等比缩放整个页面，包括字体、边框、间距。想让表格内文字“不缩放”，其实是想让它**保持物理像素尺寸稳定**，但这与可访问性原则冲突——用户依赖缩放来阅读，硬性阻止会损害低视力群体体验。真正可行的目标是：**文字大小响应系统字体设置，但不被浏览器临时缩放干扰**。

用text-size-adjust禁用自动缩放而非禁止用户缩放 移动端和部分桌面浏览器会在检测到小字号文本时自动放大（如 iOS Safari 对 font-size 强制放大），这属于“自动干预”，不是用户主动操作。要关掉这个：

• 在 html 元素上设 text-size-adjust: 100%; —— 允许用户通过系统设置或浏览器菜单调整字号，但阻止浏览器擅自改动
• 避免写 text-size-adjust: none;，它会彻底屏蔽所有用户级字体调节，WCAG 不合规
• 该样式必须作用于文本的祖先容器（如 html 或包裹表格的 div），仅加在 td 上无效

字体单位选 rem 而非 px 或 % px 在强制缩放下会被忽略，% 因嵌套继承易失控，rem 是唯一能兼顾系统字体偏好与可控性的单位：

• 根元素设 html { font-size: 100%; } —— 等价于用户代理默认值（通常 16px），且随系统“更大字体”设置联动
• 表格内文字用 font-size: 0.875rem; 这类相对值，而非 14px
• 务必配 <meta name="viewport" content="width=device-width, initial-scale=1.0">，否则 rem 基准在移动端会被缩放层扭曲

打印和 PDF 导出场景需额外处理 打印预览中浏览器可能忽略 text-size-adjust，且默认使用设备 DPI 渲染。若需确保 A4/A5 打印时字号绝对固定：

• 在 @media print 中显式用 px 单位（如 font-size: 12px;），此时 px 指物理点（1/96 inch），符合打印规范
• 禁用 transform: scale() 类缩放，它会让打印内容错位或裁切
• 避免 vw/vh，打印上下文无视口概念，这些单位退化为 0

关键点在于：没有真正的“不缩放”，只有“可控响应”。用户缩放权不可剥夺，能做的只是切断浏览器的自动干预、用 rem 对齐系统设置、并在打印等特殊场景切换为绝对单位。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！