加 readonly 是最简单有效的解决方式，可避免软键盘弹出导致 laydate 弹出层被遮挡；若需双模式，则需监听 focusin 和 visualViewport.resize 事件并动态调整面板位置。
laydate弹出层被软键盘遮挡的典型表现
用户点击 laydate 输入框后，软键盘弹出，但日期面板仍停留在原位置（常卡在页面底部或被键盘完全盖住），无法滚动查看、无法点击日期；尤其在微信内置浏览器或 ios safari 中复现率极高。这不是 laydate 本身 bug，而是移动端视口计算逻辑与 fixed 定位冲突导致的共性问题。
给 input 加 readonly 是最简单有效的绕过方式
不让输入框触发系统软键盘，就能彻底避开“键盘弹起 → 视口压缩 → 层级错乱”的连锁反应。laydate 本就不依赖用户手动输入，只靠点击选择，所以加 readonly 不影响功能，反而提升稳定性：
-
<input type="text" id="date1" readonly>—— 直接写在 HTML 中即可 - 如果用 JS 动态生成，记得同步设置：
inputEl.readOnly = true - 避免用
disabled：它会让 laydate 初始化失败，且样式变灰 - 注意兼容性：
readonly在所有现代移动端浏览器中均有效，包括微信 WebView
若必须保留可编辑（如需手动输入+日期选择双模式）
此时需监听软键盘行为并主动调整日期面板位置。关键不是“等键盘弹出再动”，而是提前预防错位：
- 确保
laydate.render()的position: 'absolute'（默认值），不要设为'fixed'，否则在 visual viewport 变化时定位失效 - 在
ready回调中手动把面板挂到body下：elem: document.body，避免被局部overflow: hidden的父容器裁剪 - 绑定
focusin事件，在聚焦瞬间调用inputEl.scrollIntoView({ block: 'center' })，强制让输入框居中（注意 iOS 15.4+ 已废弃scrollIntoViewIfNeeded） - 慎用
window.innerHeight做判断：它在部分安卓浏览器中不随键盘实时更新，优先用window.visualViewport?.height（2026 年已全平台支持）
为什么不用 layer.style() 或 success 里强行改 top
这类硬编码偏移的做法在不同机型上效果极不稳定：
- 键盘高度无标准值（iOS 约 216px，部分安卓超 300px），
top: -200px在 iPhone 12 上刚好，在华为 Mate 50 上可能过头 - 微信环境会拦截
layer.style()对弹层的 DOM 操作，导致样式不生效 -
success回调触发时，软键盘往往尚未完全展开，计算出的 offset 是错的 - 真正可靠的时机是
visualViewport.resize事件，且必须配合focusin记录当前元素
trigger 元素（即你点击的那个 input）如果套在 position: relative 且带 transform 的父容器里，它的 getBoundingClientRect() 会失真，导致后续所有滚动/定位计算全错。遇到这类情况，直接把 input 提到 body 下，用 CSS 控制显示位置更稳妥。
