I wrote the code below to scale all content along with the browser size, so that all content is always visible (in a scaled-up or scaled-down version).
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);
The code works really well in Firefox, but there are some inconsistencies in Chrome and Safari (Webkit-based browsers in general I assume since they both appear to behaving similarly).
For example, if I load my page with the browser window maximised, it scales nicely upon resize. However, if I refresh the page when the browser is resized, a large piece is cut off (i.e. it loads in original size without scale applied). But if I reload the page (by means of hitting the enter key in the address bar) when the browser is resized, everything displays correctly and scales accordingly. However, if I hit the refresh button, the cutting off happens again.
I have already tried adding a setTimeout
(with various values for duration), but that does not work. Does anyone know how I can solve this issue? Thanks.
No replies indicate that no one knows what might be wrong. Anyway, after eons of searching, I have found the solution.
I had to simply set a height on #view
in CSS for the scale to function properly every time.