javascript - 刷新页面时 Transform scale() 在 Chrome 和 Safari 中不一致

Question

我编写了下面的代码来缩放所有内容以及浏览器大小，以便所有内容始终可见(在放大或缩小版本中)。

var docHeight = $(document).height();
var winHeight;
var zoomRatio;

function z(number) {
    var adjusted = number * zoomRatio;
    return adjusted;
}

fitWindow();
function fitWindow() {
    setTimeout(function(){
        winHeight = $(window).height();
        zoomRatio =  winHeight / docHeight;
        if (docHeight >= winHeight) {
            $('#view').css({
                transform: 'scale('+zoomRatio+')',
                'transform-origin': '0 0',
                '-moz-transform': 'scale('+zoomRatio+')',
                '-moz-transform-origin': '0 0',
                '-o-transform': 'scale('+zoomRatio+')',
                '-o-transform-origin': '0 0',
                '-webkit-transform': 'scale('+zoomRatio+')',
                '-webkit-transform-origin': '0 0',
                '-ms-transform': 'scale('+zoomRatio+')',
                '-ms-transform-origin': '0 0'
            });
        }
    }, 0);

    getAnchors();

    console.log(docHeight + ' ' + winHeight);
}

$(window).resize(fitWindow);

该代码在 Firefox 中运行良好，但在 Chrome 和 Safari 中存在一些不一致(我认为通常是基于 Webkit 的浏览器，因为它们的行为似乎相似)。

例如，如果我在最大化浏览器窗口的情况下加载我的页面，它会在调整大小时很好地缩放。但是，如果我在调整浏览器大小时刷新页面，则会切掉一大块(即它以原始大小加载而不应用缩放)。但是，如果我在调整浏览器大小时重新加载页面(通过点击地址栏中的回车键)，所有内容都会正确显示并相应缩放。但是，如果我点击刷新按钮，中断会再次发生。

我已经尝试添加一个 setTimeout(具有不同的持续时间值)，但这不起作用。有谁知道我该如何解决这个问题？谢谢。

Answer 1

没有回复表明没有人知道可能出了什么问题。不管怎样，经过无数次的搜索，我找到了解决方案。

我必须简单地在 CSS 中的 #view 上设置一个高度，以使比例每次都能正常工作。