Question

I’ve got a jqueryui dialog box which works brilliant except when zoomed in on an iOS device. When the user triggers to open the dialog, it ceters way off screen. This doesn’t occur if the user isn’t zoomed. What can be done to fix this?

$('#white_box_content_'+id).dialog({ 
        autoOpen: false,
        modal:true,
        position:"center",
        closeText:'',
        resizable:false,
        title:null,
        draggable:false,
        //dialogClass:'jquery_dialog_position',
        zIndex:800 
    });
    $('#white_box_content_'+id).dialog('open');
    $('.ui-widget-overlay').css( "position" , 'fixed' );
    $(".ui-dialog-titlebar").remove();
    $('#white_box_content_'+id).dialog( "option" , 'position' , 'center' );

Answer 1

You can’t. Position: fixed does layout based on the viewport. The problem is that in iOS, zooming in on a page doesn’t change the viewport. You can’t tell when a user is zooming on a page. You can use CSS and meta tags to “disable” zooming on iOS devices though.