input[type="date"]在手机端不响应viewport缩放，因其触发的是独立系统级日期选择器，不受CSS渲染和viewport缩放控制；可通过清除appearance、设width:100%、font-size≥16px及添加min属性等方式优化输入框本体样式与交互稳定性。
input[type="date"] 在手机端不响应 viewport 缩放怎么办
直接结论：input[type="date"] 本身会触发系统原生日期选择器，**它不走 CSS 渲染流程，也不受 width: 100% 或 viewport 缩放影响**。你看到的“没自适应”，其实是浏览器把输入框渲染成一个固定高度的按钮区域，而点击后弹出的系统 picker 是独立 UI，不受网页控制。
让 date 输入框在视觉上撑满容器宽度
虽然 picker 不可控，但输入框本体可以样式化（部分浏览器支持）。关键点是清除默认 padding、border 和 appearance，并强制宽度：
- 必须设
width: 100%，且父容器不能有overflow: hidden截断 - 加
-webkit-appearance: none和appearance: none移除原生样式 - 手动重置
padding和border，否则 iOS Safari 会保留左右内边距导致文字偏移 - Android Chrome 对
font-size敏感，设太小会导致点击热区变窄，建议不低于16px
<input type="date" class="date-input">
.date-input {
width: 100%;
padding: 12px;
font-size: 16px;
border: 1px solid #ccc;
-webkit-appearance: none;
appearance: none;
background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M3 4h8v2H3V4zm0 3h8v2H3v-2z' fill='%23666'/></svg>") no-repeat right 12px center;
}
iOS Safari 下 placeholder 不显示、点击无反应的坑
iOS 15+ 开始，input[type="date"] 默认隐藏 placeholder 文字，且如果没设 min 或 max，部分机型可能触发点击无反馈——这不是 bug，是 Safari 对空值 date 输入框的保护策略。
- 加
min="2020-01-01"（或业务允许的最早日期）能稳定激活输入行为 - 用
::-webkit-datetime-edit伪元素模拟 placeholder（仅限 WebKit） - 别依赖
value=""判断是否为空，iOS 可能返回"1970-01-01"而非空字符串 - 监听
change事件，而非input，因为 date 输入不实时触发
真要完全自定义？别硬改 input，换方案
如果业务要求统一 UI、带年份滚动、支持中文星期、或需兼容微信内置浏览器（它压根不支持 input[type="date"]），就别折腾原生控件了。
立即学习“前端免费学习笔记（深入）”；
- 用
input[type="text"]+ 日期格式校验（如pattern="\d{4}-\d{2}-\d{2}"）配合 JS 日历库（如 flatpickr、vanilla-picker） - 微信场景必须用 JS 方案，它的 WebView 对原生日历支持极差，甚至会跳转到空白页
- 注意 touch target 至少 44×44px，否则手指点不准——原生 date 框在某些 Android 上只有 28px 高
最常被忽略的是：不是所有“自适应”都要靠 CSS 解决。date 输入框的交互链路（点击 → 系统 picker → 回填）里，真正能控制的只有首尾两端，中间那段交给系统，接受它的规则比强行 hack 更可靠。
