直接设 font-size: 14px 会出问题，因为 ios safari 检测到 input 元素的计算字号小于 16px 时，会强制触发自动缩放以保障可读性，导致布局错位、键盘遮挡等异常，本质是浏览器辅助功能策略而非样式失效。
HTML 日期输入框（<input type="date">）的默认字号不能直接用 font-size 安全修改，尤其在 iOS Safari 和旧版 Android WebView 中会触发自动缩放、布局错位甚至键盘遮挡——这不是样式问题，而是浏览器辅助功能策略。
为什么直接设 font-size: 14px 会出问题
iOS Safari 检测到 <input> 元素的计算字号 • 页面重排、相邻元素跳动
• 键盘弹出后输入框被顶出可视区
• 原生日期选择器面板位置偏移或不可点
• 即使加了 -webkit-text-size-adjust: none，现代 Safari 已忽略该声明
真正有效的字号控制方式
唯一稳定方案是把字号「抬升」到根元素，并让所有输入框继承：
• 在 CSS 中设 html { font-size: 16px; }（或 100%，更尊重系统设置）
• 所有表单控件（包括 <input type="date">）不单独设 font-size，只靠继承
• 如需局部放大（如老年模式），统一改 document.documentElement.style.fontSize，而非单个 input
如果必须微调 date 输入框的视觉字号
只能通过间接手段，且需接受兼容性折损：
• 加 padding + line-height：增大点击热区，视觉上“显得更大”，例如 padding: 10px 12px; line-height: 1.4;
• 禁用缩放副作用：在 <meta name="viewport"> 中确保 initial-scale=1.0，避免 viewport 缩放干扰
• 避开 Safari 的坑：macOS/iOS 上若发现仍缩放，可临时加 transform: scale(1.05) 并同步调整 transform-origin，但注意这会破坏点击热区和无障碍支持——仅限兜底
最易被忽略的是：哪怕你成功改了字号，原生 date 控件的内部按钮（日历图标、清空 ×）尺寸和间距并不会同步缩放，它们由浏览器私有样式控制，无法用 CSS 覆盖。真要完全可控，就得放弃原生控件，换 flatpickr 或原生 <input type="text"> + JS 格式校验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
