ios safari强制放大输入框是因为其硬编码可访问性逻辑：当input、textarea、select或contenteditable元素聚焦时，若最终渲染font-size小于16px，便强制放大视口以提升可读性。
为什么iOS Safari会强制放大输入框
iOS Safari 在 input、textarea、select 或带 contenteditable 的元素获得焦点时，会硬编码检查其**最终渲染的 font-size**。只要计算值
- 根元素
html { font-size: 12px }，再写1.333rem→ 实际 15.996px，Safari 四舍五入判为 - 父容器设
font-size: 0.875em，子input继承后掉到 14px -
clamp(14px, 4vw, 16px)在 320px 屏下算出 12.8px，直接触发 - UI 库（如
<van-field></van-field>）用内联 style 写了font-size: 14px，你的外部 CSS 被覆盖
必须同时生效的三个关键点
缺一不可，且顺序和写法都影响效果：
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">必须放在最顶部，不能 JS 动态注入 -
input、textarea、select、[contenteditable]都要显式设font-size: 16px !important，不能只写input - 必须加
:focus规则，否则框架动态加 class 可能导致字号回落；例如：input:focus { font-size: 16px !important; } -
-webkit-text-size-adjust: 100%要和font-size同级写在表单元素上，不是写在body上——它只在字号 ≥16px 时起作用
Vue/React 项目里 CSS 为什么没生效
框架组件常在 mounted 阶段动态注入样式，或用 CSS-in-JS 生成高优先级 class，把你写的规则盖掉：
-
<van-field></van-field>或<input>内部用内联 style 设置了font-size，得用更强选择器覆盖，比如：input:not([type="hidden"]) !important - 直接在组件上加
style="font-size: 16px !important"是最快验证方式 - 务必打开开发者工具，切到「Computed」面板确认最终
font-size值——别信源码里写的那行 CSS - 避免用
rem/em，优先用px或clamp(16px, 4vw, 18px)（确保下限真 ≥16px）
Android 和其他浏览器要不要适配
这个行为是 iOS Safari 独有。Chrome for Android、Firefox、Edge Mobile 都不触发该逻辑。但要注意：
-
vh单位在 iOS Safari 中不稳定（地址栏收放导致视口高度跳变） - 某些 Samsung Internet 版本有类似逻辑，但概率极低，不必为兼容它牺牲 iOS 体验
- 真正容易被忽略的是：所有 CSS 修复都建立在
viewportmeta 标签正确生效的前提下。如果它写错或缺失，再调font-size和box-sizing都只是白忙——Safari 根本不给你“不放大”的机会
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
