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的浏览器，因为它们看起来行为相似）。

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

我已经尝试添加setTimeout（持续时间的各种值），但这不起作用。有谁知道如何解决这个问题？感谢。

Answer 1

没有回复表明没有人知道可能出错的地方。无论如何，经过多年的搜索，我找到了解决方案。

我必须在CSS中的#view上设置一个高度，以便每次都能正常运行。

刷新页面时，Chrome和Safari中的scale（）变换不一致

1 个答案: