HTML页面放大本质是控制渲染缩放比例，首选跨浏览器兼容的transform: scale()，慎用非标zoom属性和全局缩放；viewport仅适用于移动端等比缩放。
HTML 页面或元素放大，本质是控制渲染缩放比例，不是“放大图片”那种像素拉伸。直接用 zoom 属性最简单，但它不是标准 CSS 属性，仅 Chrome/Edge 支持，Firefox 完全不认；真正跨浏览器可靠的方式是用 transform: scale() 或 viewport 元标签控制整体缩放。
用 transform: scale() 放大单个元素
这是最可控、兼容性好（IE9+）、不影响文档流的方式。注意：它会按中心点缩放，可能造成溢出或遮挡，需配合 transform-origin 和容器 overflow 调整。
-
scale(2)表示放大 2 倍，坐标和尺寸都按比例变换，但元素实际占用的布局空间不变（即不挤占其他元素） - 若想让放大后的元素也占据对应空间，得手动调整
width/height，但这就失去transform的优势了 - 触发硬件加速可加
transform: scale(2) translateZ(0)，避免部分安卓 WebView 渲染模糊 - 慎用于表单控件（如
<input>），某些浏览器下 focus 框位置会偏移
div.enlarged {
transform: scale(1.5);
transform-origin: top left; /* 从左上角开始缩放 */
overflow: visible;
}用 viewport 元标签控制整个页面缩放
适用于响应式页面在移动端强制“等比放大”，比如让 375px 宽的设计在 414px 屏上显示得更大些。本质是欺骗浏览器视口宽度，从而间接放大渲染结果。
-
initial-scale=1.1表示初始缩放为 110%，但用户仍可双指缩放（除非加user-scalable=no） - 搭配
width=device-width使用才有意义；单独设initial-scale在桌面 Chrome 可能被忽略 - iOS Safari 对
maximum-scale限制严格，设成 1 也不一定禁掉双指缩放 - 不要在桌面端 HTML 中硬写这个，会导致 PC 浏览器意外缩放
<meta name="viewport" content="width=device-width, initial-scale=1.1, user-scalable=yes">
避免用非标 zoom 属性
zoom 是 IE 时代遗留属性，Chrome/Edge 保留了支持，但 Firefox、Safari 完全不解析。W3C 从未将其纳入标准，MDN 明确标记为“非标准”。依赖它等于主动放弃一部分用户。
立即学习“前端免费学习笔记（深入）”；
-
zoom: 1.5看似简洁，但 Firefox 下完全无效，且会触发 IE 兼容模式相关 bug - 即使只面向 Chrome 内核应用（如 Electron），也建议统一用
transform，保持行为一致 - 用 PostCSS 或构建工具自动补全
-webkit-transform即可覆盖旧版 Safari
全局 CSS 缩放：慎用 html { transform: scale() }
有人尝试给 <html> 或 <body> 加 transform: scale(1.2) 实现整页放大，技术上可行，但问题集中：
- 滚动条位置、
position: fixed元素会错位（因 transform 创建新层叠上下文） - 所有像素单位（
px）在缩放后实际渲染尺寸变大，但媒体查询仍按原始视口宽高触发，响应逻辑易混乱 - Canvas、SVG 内部坐标系不受影响，需额外适配，否则图形变形
- 打印样式表（
@media print）中该缩放依然生效，可能导致打印内容溢出
真正需要整页放大时，优先考虑系统级缩放（如 Windows 设置“缩放与布局”）或浏览器 Ctrl + +；前端强行模拟，往往要为边缘 case 写一堆 hack。
