适应iOS设备的jQuery UI对话框

Question

我正在使用jQuery UI创建一个对话框，当用户点击mailto链接时会显示该对话框。简而言之，对话框确认用户在继续之前接受条款。不幸的是，在iPhone上，对话框太小，如果用户之前已放大，它不会在屏幕上保持居中。

以下是代码：

...
    .dialog({
        autoOpen: false,
        title: 'Disclaimer',
        resizable: false,
        width: 500,
        modal: true,
        position: 'top+10%',
        buttons:            
            {
    "Accept": function() {
      $( this ).dialog( "close" );
      window.location.href="mailto:"info@example.com;"
      },
    "Cancel": function() {
      $( this ).dialog( "close" ); }
 }
 });

$('.email-address').click(function(event) {
event.preventDefault();
    $dialog.dialog('open');
    $('.ui-dialog :button').blur();
});
});

我正试图找出解决此问题的最佳方法。理想情况下，我希望对话框填满大部分屏幕，并且即使用户放大也总是居中（即，我不希望在显示时切断对话框）。或者，我希望对话框在iPhone上表现为原生对话框。如果我执行后者，是否需要创建一个仅在智能手机上查看时才能运行的单独脚本？

对于实现这些目标的最佳方法的任何想法都将非常感激。