1

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

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（具有不同的持续时间值），但这不起作用。有谁知道我该如何解决这个问题？谢谢。

4

1 回答 1

2

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

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

于 2013-06-20T19:18:09.970 回答