移动端input date兼容性差需特征检测并降级JS日历库；viewport标签须置head顶部且禁用user-scalable=no；iOS14.5以下需检查customElements支持并降级；Android4.4 WebView flex-wrap错位应设min-width:0。
移动端不识别 <input type="date"> 怎么办
原生 <input type="date"> 在 iOS Safari 和部分安卓 WebView 中表现不一致：iOS 会唤起系统日期选择器，但 Android 多数老版本（尤其 WebView 内嵌场景）直接降级为文本框，且无法触发 change 事件。这不是 bug，是规范实现差异 —— HTML5 标准只要求“尽力支持”，没强制渲染逻辑。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
Modernizr.inputtypes.date或简单特征检测：const supportsDate = typeof document.createElement('input').type === 'string' && 'date' in document.createElement('input') - 检测失败时，用轻量 JS 日历库（如
flatpickr或vanilla-picker）接管，避免引入moment.js这类重型依赖 - 服务端必须校验日期格式，不能信任前端
valueAsDate或字符串输入 —— 用户可能手动改 DOM 或绕过 JS
<meta name="viewport"> 缺失或写错导致页面缩放异常
移动端标签行为差异的根源常不在标签本身，而在视口控制失效。比如 <meta name="viewport" content="width=device-width, initial-scale=1"> 漏写、拼错 name 值，或在动态插入的 中晚于 CSS 加载，都会让 iOS Safari 强制缩放页面，导致按钮点不中、字体忽大忽小。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把
<meta name="viewport">放在最顶部，早于所有 CSS 和 JS - 避免写
user-scalable=no—— iOS 10+ 会忽略，且影响无障碍访问 - 测试时用 Safari 开发者工具的「Responsive Design Mode」模拟真实 UA，别只靠 Chrome 的设备模拟 —— Chrome 不模拟 iOS 的 viewport 解析逻辑
自定义元素（customElements.define）在 iOS 14.5 以下不工作
iOS 14.5 是 Web Components 的分水岭。低于此版本的 Safari 不支持 customElements.define() 中的异步升级（即 constructor 里 await），也不支持 elementInternals。很多 UI 组件库默认启用这些特性，导致页面白屏或报错 TypeError: customElements is not defined。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
if ('customElements' in window)包裹注册逻辑，降级为普通 class + data- 属性方案 - 构建时用
@webcomponents/webcomponentsjs的webcomponents-bundle.js，但注意它不修复elementInternals—— 那部分得手写aria-*属性模拟 - 避免在
connectedCallback中直接操作shadowRoot后立即读取offsetHeight—— iOS 旧版中 shadow DOM 渲染有延迟，需requestAnimationFrame节流
flexbox 在 Android 4.4 WebView 中的 flex-wrap 错位
Android 4.4 系统 WebView 使用的是废弃的 display: -webkit-flex 引擎，对 flex-wrap: wrap 的换行计算有偏差：子项宽度稍超容器时，本该换行的项被挤到下一行右侧空白处，视觉上像“消失”了。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给 flex 容器加
min-width: 0（不是width: 0），强制触发旧引擎的宽度重算 - 避免用百分比 +
flex-basis混合设置子项宽度；统一用flex: 0 0 50%替代width: 50%; flex: 1 - 真机测试必用 Android 4.4 实机或 Genymotion 模拟器 —— Chrome DevTools 的 device mode 不模拟这个 bug
跨平台标签兼容性最麻烦的不是语法不支持，而是同一行 HTML 在不同引擎里触发了完全不同的渲染路径。多一个空格、少一个 polyfill、meta 标签位置偏移几行，都可能让页面在某个机型上“看起来正常但点不动”。测的时候别省真机。
