因ios safari地址栏收放和android软键盘唤起导致视口高度动态变化，fixed元素锚定“当前视口底边”而非页面物理底部，致弹窗被顶起或卡半空；应改用100dvh配合transform: translatey()实现动态响应。
移动端底部弹窗为什么不能直接用 position: fixed + bottom: 0？
因为 iOS Safari 的地址栏收放、Android 浏览器的软键盘唤起，都会导致视口高度（window.innerHeight）动态变化，而 fixed 元素会锚定在“当前视口底边”，不是页面物理底部。结果就是：键盘弹出时弹窗被顶上去、收起键盘后又卡在半空，拖拽感完全断裂。
transform: translateY() 配合 vh 单位怎么避免视口抖动？
关键不是用 100vh，而是用 100dvh（dynamic viewport height）。它能响应浏览器 UI 变化实时更新，iOS 16.4+ 和 Android Chrome 105+ 已支持：
.modal-bottom {
position: fixed;
bottom: 0;
width: 100%;
transform: translateY(0); /* 初始状态：贴底 */
height: 40dvh; /* 不是 40vh */
}
如果需兼容旧系统，得监听 resize 事件手动更新 style.height 或 style.transform，但注意防抖——频繁触发 resize 会导致卡顿。
拖拽反馈的视觉适配要点有哪些？
用户手指滑动时，要让弹窗有“被拖着走”的轻量反馈，而不是生硬跳变。核心靠三件事：
- 用
transform: translateY()做位移（GPU 加速，不触发布局重排） - 加
transition: transform 0.2s cubic-bezier(0.33, 1, 0.68, 1)—— 这个缓动曲线模拟“回弹”惯性，比ease-out更自然 - 拖拽中实时设置
transform，松手后根据位移阈值决定是close还是snapped back，不要依赖top/bottom动画
为什么 touch-action: none 必须加在弹窗容器上？
否则 iOS Safari 默认会对纵向 touchmove 做页面滚动拦截，导致拖拽手势被吞掉，手指划不动。同时要阻止默认行为：
element.addEventListener('touchmove', e => {
if (isDragging) e.preventDefault(); // 关键
}, { passive: false });
注意：{ passive: false } 是必须的，否则 e.preventDefault() 在现代浏览器里无效；但加了它，整个页面的 touch 滚动也会失效，所以只应在弹窗激活且处于拖拽态时绑定该监听。
拖拽感的本质不是动效多炫，而是位移响应是否跟手、边界是否清晰、松手逻辑是否符合直觉——这些全藏在 transform 的时机、dvh 的选用、以及 passive 监听的开关控制里。漏掉任意一环，用户就会觉得“卡”或“不跟手”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
