我编写了下面的代码来缩放所有内容以及浏览器大小,以便所有内容始终可见(按比例放大或缩小版本)。
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
(持续时间的各种值),但这不起作用。有谁知道如何解决这个问题?感谢。
答案 0 :(得分:1)
没有回复表明没有人知道可能出错的地方。无论如何,经过多年的搜索,我找到了解决方案。
我必须在CSS中的#view
上设置一个高度,以便每次都能正常运行。