Javascript如何在用户放大时将叠加图居中

Question

我创建了一个iframe，并将其作为叠加层添加到页面中。我希望它在页面的中心。但是，当我在非移动优化页面上移动并放大时，iframe通常会显示在屏幕上。

var w = window,
    d = document,
    e = d.documentElement,
    g = d.getElementsByTagName('body')[0],
    width = w.innerWidth || e.clientWidth || g.clientWidth;

display_width = 450;
margin = (width-450) / 2;

frame.setAttribute('style','z-index: 2147483647;position:fixed;top:20px;left:'+margin+'px;width:'+display_width+'px;margin:0px;border: 1px solid; border-color:#ddd;max-width:none;overflow:visible;');

function resizeFrameWidth(){
    var frame = document.getElementById('PennyPledge54DT');
    var w = window,
    d = document,
    e = d.documentElement,
    g = d.getElementsByTagName('body')[0],
    width = w.innerWidth || e.clientWidth || g.clientWidth;

    var margin = 20;
    var display_width = width - 40;

    if(!mobile){
        display_width = 450;
        margin = (width-450) / 2;
    }
    frame.style.width = display_width+"px";
    frame.style.left = margin+"px";
}
if(window.attachEvent) {
    window.attachEvent('onresize', resizeFrameWidth);
}
else if(window.addEventListener) {
    window.addEventListener('resize', resizeFrameWidth, true);

当我调整窗口大小时它会起作用，但是当我缩放时它不起作用。

修改 这是一个jsfiddle按要求。但是，当您放大内容时，问题就会出现。我只知道如何通过移动设备这样做。所以我不知道小提琴会有多大用处。

https://jsfiddle.net/41y62su7/

修改 这是我稍微放大页面时我的iframe在移动设备上的样子的截图。