iOS HTML5页面缩放异常主因是viewport标签配置错误：必须设width=device-width、initial-scale=1.0、user-scalable=yes；input聚焦时字体小于16px会触发系统级放大，需设font-size:16px或-webkit-text-size-adjust:100%；避免transform:scale()干扰viewport。
iOS 上 HTML5 页面缩放异常，根本原因几乎总是 viewport 元标签配置错误或缺失，而不是 Safari 渲染引擎本身有问题。
viewport meta 标签漏写或写错
iOS Safari 默认禁用用户双指缩放，但若 viewport 缺失、user-scalable=no 被误加、或 initial-scale 与 width 冲突，就会导致页面“看起来被放大/缩小/错位”。
- 必须包含：
-
width=device-width是关键——它让页面宽度匹配设备逻辑像素（非物理像素），缺了就按桌面模式渲染，文字小、布局挤 -
initial-scale=1.0必须显式声明，iOS 某些版本在横屏/旋转后会丢失默认缩放值 - 避免
maximum-scale=1.0或user-scalable=no，除非你明确禁止缩放（且已通过无障碍审核）
input 元素聚焦触发意外缩放
iOS Safari 在 、 获取焦点时，若字体小于 16px，会自动放大整个视口以提升可读性——这是系统级行为，不是 bug，但常被误认为“缩放异常”。
- 给所有表单控件加
font-size: 16px（或更大），即可阻止自动放大 - 若设计要求小字号，可用
-webkit-text-size-adjust: 100%禁用字体缩放（仅对 input 生效） - 注意：该样式不支持
rem或em单位，必须是绝对单位如px
CSS transform 缩放干扰 viewport
用 transform: scale() 对容器做缩放时，iOS Safari 可能与 viewport 计算冲突，尤其配合 fixed 定位元素时，滚动后出现模糊、错位或缩放复位。
立即学习“前端免费学习笔记（深入）”；
- 优先用响应式布局（
flex、grid、媒体查询）替代transform: scale() - 若必须缩放，加上
transform-origin: 0 0明确基点，并确保父容器overflow: hidden防止溢出 - 避免在
body或html上直接使用transform，iOS 会忽略部分样式重绘
最常被忽略的是：iOS 模拟器和真机表现不一致，真机上 input 字号不足 16px 的问题一定会触发缩放，而模拟器可能不体现。调试务必连真机，用 Safari 开发者工具检查 viewport 解析结果和实际渲染尺寸。
