JS获取浏览器页面缩放百分比

在某需求中想要实现,当窗口变动时实时改变元素宽度以使其美观.
由于外层框架是底层代码生成的,且会在变动时刷新,故百分比布局并不完全适用.
此时考虑变动时重新赋予宽度,但非当前页面缩放再跳回时会出现获取宽度值错误导致文字丢失,所以记录了初始宽度值,并根据获取当前缩放比进行计算,以下是获取页面缩放率的函数

function getWindowRatio(){
    var ratio=0;
    var screen=window.screen;
    var ua=navigator.userAgent.toLowerCase();

    if(window.devicePixelRatio !== undefined){
        ratio=window.devicePixelRatio;
    } else if(~ua.indexOf('msie')){
        if(screen.deviceXDPI && screen.logicalXDPI){
            ratio=screen.deviceXDPI/screen.logicalXDPI;
        }
    } else if(window.outerWidth !== undefined && window.innerWidth !== undefined){
        ratio=window.outerWidth/window.innerWidth;
    }

    if(ratio){
        ratio=Math.round(ratio*100);
    }
    return ratio;
}

注1:该方法按理来说在另一页面直接改变浏览器窗口大小再改变缩放率后跳回目标页面时,宽度应该是不对的,但本人的页面中并没有发生这个问题,考虑是$(window).resize本身或本人前端框架的问题,未进行验证,暂留

注2:理论上缩放前后的px值是成缩放比的,但在获取元素宽度时会发现有一定误差,目前认为是元素块的边框等宽度时单独计算的,导致实际缩放计算的不准确,另外固定写入的宽度,如某块宽为10px在缩放前后仍是10px,缩放实际改变的是浏览器窗口的容纳像素值,例如初始时窗口内最大宽度为1024px.在放大至2倍时,实际是同样的窗口只能显示其中的512px像素,即原来100%宽度代表1024像素,放大后仅代表512像素,但固定的像素值是不会改变的