My goal was to design a code that would adjust all content according to the browser size, ensuring that everything remains visible even when the window is resized.
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 performs well in Firefox, but I encountered some inconsistencies in Chrome and Safari. For instance, when loading the page with a maximized browser window, it scales correctly upon resize. However, refreshing the page while the browser is resized leads to parts of the content being cut off, displaying in its original size without scaling. Interestingly, reloading the page using the enter key in the address bar allows proper display and scaling. Unfortunately, clicking the refresh button triggers the cutting-off issue again.
I attempted adding a setTimeout function with different duration values, but this did not resolve the problem. Does anyone have insight on how to address this dilemma? Your help is greatly appreciated.