最稳定解法是为input、textarea、select和[contenteditable]设font-size:16px!important,并配viewport中maximum-scale=1.0与user-scalable=no;因iOS Safari硬编码仅认16px为防缩放阈值,且需覆盖:focus态及动态注入场景。

直接给 input、textarea、select 和 [contenteditable] 元素设 font-size: 16px !important,再配合 viewport 中 maximum-scale=1.0 与 user-scalable=no,是目前最稳定、兼容性最好的解法。纯靠禁用缩放或 JS 动态改 viewport,容易漏掉触发点,也治标不治本。
为什么必须写 font-size: 16px,而不是 15px 或 17px
iOS Safari 的放大逻辑是硬编码判断:只要元素最终 computed font-size 小于 16 CSS 像素,就强制缩放视口。这个值不是你写的声明值,而是浏览器计算后的渲染结果——所以 15.99px、1.143rem(在 html { font-size: 14px } 下)都会触发。
- 16px 是唯一被所有 iOS 版本(包括 iOS 17+)一致认可的安全整数阈值
- 用
rem或em时,必须确保根字号或继承链最终 ≥16px,否则无效 - 第三方 UI 库(如 Vant、Tiptap)可能动态注入内联样式,覆盖你的设置,
!important几乎是必需的
哪些元素和状态必须一并覆盖
只写 input 和 textarea 是不够的。iOS 同样会检测以下元素的 font-size:
-
select下拉框(常被忽略) - 所有带
contenteditable属性的容器(哪怕只是<div contenteditable>) - 富文本编辑器根节点(Quill、Vue 的
v-model绑定的div[contenteditable]) - 必须同时覆盖普通态和
:focus态,防止某些框架在聚焦时动态加 class 导致字号回落
推荐兜底写法:
input, textarea, select, [contenteditable] { font-size: 16px !important; }
input:focus, textarea:focus, select:focus, [contenteditable]:focus { font-size: 16px !important; }
viewport meta 标签怎么写才真正生效
maximum-scale=1.0 单独存在没用,它必须和 user-scalable=no 同时出现,且 user-scalable 必须是字符串 no(不是 false 或空值)。更重要的是,这个 meta 标签必须在 <head> 中静态存在,不能靠 JS 动态插入——部分 iOS 版本根本不识别。
立即学习“前端免费学习笔记(深入)”;
- 正确写法:
<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=no"> -
initial-scale=1.0和minimum-scale=1.0属于冗余项,可省略 - 缺失
width=device-width会导致整个 viewport 解析异常,让 scale 设置失效 - 该标签是前提条件:如果它没生效,后面所有 CSS 都白搭
容易被忽略的动态场景和兼容细节
静态页面加个 CSS 就完事?现实里几个坑很隐蔽:
- Vue/React 中通过
v-html或dangerouslySetInnerHTML插入的富文本,其内部[contenteditable]不受全局样式影响,需用:deep([contenteditable])(Vue)或* /deep/ [contenteditable](旧版)穿透作用域 -
-webkit-text-size-adjust: 100%只有在font-size ≥ 16px时才起效,且必须和字体声明写在同一选择器里,不能只挂在html或body上 - 某些 reset.css 或 Bootstrap 默认把
box-sizing设为content-box,导致width: 100%实际内容区变窄,Safari 会判定“太窄”而放大——建议统一加box-sizing: border-box !important到表单元素
真正复杂的地方不在代码量,而在「computed font-size 是否真的稳稳 ≥16px」——每次改了 rem 基础值、用了新组件库、或者加了动态内联样式,都得重新验证一遍这个数字。


















