ios safari输入框聚焦自动放大是系统级可访问性逻辑，非bug；必须同时满足viewport中maximum-scale=1.0且user-scalable=no，以及input/textarea等元素computed font-size≥16px、box-sizing:border-box方可规避。
iOS Safari 的“响应式缩放”根本不是 CSS 能直接控制的行为——它由系统级逻辑触发，CSS 只能配合规避。真正起效的只有 viewport 配置和字体尺寸这两条硬规则，其他都是辅助。
viewport meta 标签必须写对，否则其他全白搭
几乎所有缩放异常都源于 meta name="viewport" 写错或被覆盖。Safari 在 input 聚焦、横竖屏切换、分屏启动时，会严格按这个标签重新计算视口，写错一行就连锁崩塌：
-
user-scalable=no必须是字符串no，不能是false、空值或0 -
maximum-scale=1.0必须显式声明，只写user-scalable=no不生效（Safari 会忽略） -
width=device-width缺失会导致页面按桌面宽度渲染，文字小、布局挤 - 多个
meta name="viewport"标签时，只有第一个生效；Ionic/Cordova 等框架可能动态重写它 - 最稳写法：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">，且放在最顶部
input 和 textarea 的 font-size 必须 ≥16px
iOS Safari 在表单控件聚焦时，若计算出的字号小于 16px，会强制放大整个视口来“辅助阅读”。这不是 bug，是设计行为，CSS 无法拦截，只能绕过：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 所有
<input>、<textarea></textarea>必须设font-size: 16px（或等效 em/rem 值，但最终渲染不能低于 16px） - 避免用
%或em动态推算——父级 font-size 变动可能导致子级实际值跌破 16px - 慎用
-webkit-text-size-adjust: none：iOS 10+ 已废弃，且影响可访问性；若必须小字号，可用-webkit-text-size-adjust: 100%（仅对 input 生效） - 检查是否被全局 reset.css 覆盖，比如某些库默认设
input { font-size: 14px; }
vh 单位在 Safari 中会“卡死”初始视口高度
100vh 在 iOS Safari 里等于“页面加载瞬间的可视区域高度”，而非屏幕物理高度。地址栏收起后，真实可用高度变大，但元素高度不变，底部就会留白：
- 不要用
height: 100vh做全屏容器；改用min-height: 100vh+height: 100dvh（dvh 是动态视口单位，iOS 16.4+ 支持） - 兼容旧版 Safari：用 JavaScript 监听
resize，动态设置style.height = window.innerHeight + 'px'，并加防抖 - 注意：Safari 对
window.innerHeight的返回值也受地址栏状态影响，首次取值建议延迟 100ms 再读 - 如果用了
position: fixed+top: 0; bottom: 0，比 vh 更可靠，但需确保没有overflow: hidden截断内容
分屏和悬浮窗下 media query 断点会失效
iPad 分屏或悬浮窗时，window.innerWidth 可能只有 320–540px，@media (min-width: 768px) 永远不匹配，页面直接退化成手机样式：
- 别依赖像素断点，改用
@media (min-aspect-ratio: 1.2/1)—— 分屏窗口宽高比通常 >1，而手机竖屏多为 - 组合判断更准：
@media (min-aspect-ratio: 1.2/1) and (hover: hover)，过滤纯触屏设备，只对 iPad + 鼠标/Pencil 启用侧边栏 - CSS 媒体查询可能延迟触发，首次加载必须用 JS 主动检测：
if (matchMedia('(min-aspect-ratio: 1.2/1)').matches) { document.documentElement.classList.add('is-split-view'); } - Flex/Grid 容器在窄高分屏下容易撑破布局，需显式设
min-height: 0和flex-basis: 0px防坍缩
最常被忽略的是真机验证——模拟器不会触发 input 聚焦缩放，也不会模拟分屏的 viewport 压缩。只要没在真机上测过 input 聚焦、横竖屏切换、分屏拖拽这三件事，就不能算修好了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
