放大/缩小时,将jquery对话框保留在移动视口的中心？

我正在尝试将移动视口的 jquery对话框中心专门设置为iphone的safari,但是当用户尝试放大页面时,对话框会在页面的右下方移动,这使得它不再可见.

这是代码：

//-- The dialog
$("#dialog").dialog({
    modal:true,draggable:true,resizable:false,width:650,height:330,cache:false,position:'center'
}); 

//-- Make dialog center when page resize 
$(window).resize(function() {
    $(".ui-dialog-content").dialog("option","position","center");
});

这在PC的浏览器中完美运行,但对于移动设备,它仅适用于缩小页面的情况.

知道怎么做吗？

$("#dialog").dialog({
    modal:true,height:330
});

.ui-dialog {
    left: 50% !important;
    top: 50% !important;
    margin-left: -325px !important; // half 650
    margin-top: -165px !important; // half 330
}