jQuery UI Dialog是很多老项目里仍在使用的弹窗组件，它基于jQuery UI的position模块实现居中定位，并在初始化时根据浏览器窗口尺寸计算宽度与高度。在桌面端表现稳定，但放到手机浏览器中，一旦用户点击输入框唤起软键盘，就会频繁出现弹窗高度被莫名压缩、整体位置向上或向下偏移甚至超出可视区域的问题。这种现象在安卓WebView和iOS Safari上都有出现，只是触发条件和表现细节略有差异。
软键盘引发视口变化的底层原理
移动端浏览器在软键盘弹出时，并不会像桌面端那样让窗口真正改变window.innerHeight的语义含义统一不变，而是存在两种视口模型。以iOS为例，早期版本键盘会遮盖页面，window.innerHeight保持不变，但用户实际可见区域（visual viewport）缩小；安卓Chrome通常会在键盘打开时压缩layout viewport，使window.innerHeight直接变小。jQuery UI Dialog在open时调用_size和_position方法，读取的是当时的窗口高度，之后若视口高度变化，组件内部没有自动绑定resize之后的重新布局逻辑，于是出现高度计算停留在旧值、定位坐标未更新的情况。
此外，jQuery UI的position插件在计算my与at的居中时，依赖window的滚动位置和尺寸。当软键盘令页面发生滚动或可视区域上移，offset基准产生偏差，Dialog的top值便可能变成负数或被推到键盘下方。尤其在iOS上，键盘动画与页面滚动是异步的，若只在resize事件里修正一次，往往赶不上动画结束后的最终位置，这就解释了为什么单纯监听window.resize不够可靠。
理解这一点后，我们应该意识到：Dialog的定位错乱不是CSS写错，而是组件生命周期没有覆盖移动端动态视口场景。只有引入对visualViewport的监听，并在键盘完全展开后强制重算，才能从根本上解决。这也提醒我们在移动端适配旧组件时，要先厘清视口类型，而不是盲目加!important样式。
基于visualViewport的Dialog重定位实践
现代浏览器基本支持window.visualViewport对象，它能精确反映当前可见区域的大小与偏移。我们可以在Dialog打开后，向visualViewport绑定resize和scroll事件，在回调中获取最新的height与offsetTop，然后手动设置dialog的样式。下面是一段可直接用于项目初始化的兼容代码，它在键盘变化后延迟一帧执行，避开动画抖动。
// 假设dialog通过 $('#myDialog').dialog({...}) 初始化
function fixDialogForKeyboard() {
var dialog = $('#myDialog').closest('.ui-dialog');
if (!window.visualViewport) return;
function adjust() {
var vv = window.visualViewport;
// 可用高度减去一些边距
var newHeight = Math.min(vv.height * 0.8, 500);
dialog.css({
'height': 'auto',
'max-height': newHeight + 'px',
'top': (vv.height - dialog.outerHeight()) / 2 + vv.offsetTop + 'px',
'left': '50%',
'transform': 'translateX(-50%)'
});
}
window.visualViewport.addEventListener('resize', function(){
setTimeout(adjust, 100);
});
window.visualViewport.addEventListener('scroll', function(){
setTimeout(adjust, 100);
});
adjust();
}
$('#myDialog').on('dialogopen', function(){
fixDialogForKeyboard();
});
上面的代码将Dialog的top计算改为基于visualViewport的实时高度，并用transform做水平居中，避免jQuery UI自身position在移动端的不准。同时把height设为auto加max-height限制，防止内容区被键盘挤压消失。这种做法在安卓微信内置浏览器和iOS Safari测试中都有效。
如果项目中的Dialog是动态创建的，可以将fixDialogForKeyboard封装为通用函数，在每次dialogopen时调用。要注意移除旧事件防止内存泄漏，可在dialogclose中解绑。相比于改动jQuery UI源码，这种外部修正方式侵入性低，也方便统一升级。
容器层级与滚动父级的避坑处理
另一个容易被忽略的点是Dialog的父级结构。jQuery UI默认把弹窗追加到body，但有些系统会把它放进某个overflow:auto的容器内，软键盘弹出时父容器滚动会连带Dialog偏移。我们应在初始化前用appendTo选项明确指定放到body，并确保body本身不设置会拦截滚动的样式。
$('#myDialog').dialog({
appendTo: 'body',
modal: true,
open: function(){
// 禁止背景滚动
$('body').css('overflow', 'hidden');
},
close: function(){
$('body').css('overflow', '');
}
});
在iOS上，若输入框在Dialog底部，键盘升起后浏览器会自动滚动到输入框，但由于Dialog用了position:fixed或absolute，滚动行为可能让整个弹窗跳动。此时可给Dialog内部的表单区域单独设置overflow-y:auto，让内部滚动而非依赖外层，配合之前的max-height限制，用户能在键盘上方顺畅操作。
最后补充一个细节：jQuery UI Dialog的标题栏和按钮栏在高度重算时若写死像素，也会加剧错乱。建议用CSS弹性布局，让中间内容区自适应，这样无论软键盘如何变化，整体结构都不会崩。经过视口监听、容器规范、弹性布局三管齐下，移动端软键盘导致的高度压缩与定位错乱即可彻底消除。
jQuery_UI_Dialog移动端软键盘弹窗定位修改时间：2026-08-15 20:20:14