JavaScript libraries/tricks to zoom to fit page contents to viewport?

Question

I have an HTML/CSS screen that looks/works great when full-screened on a typical laptop monitor.

However, it was built using static sizes and many-a-css/JS hack. This means that when it's opened on larger monitors it looks tiny.

On the bigger monitor, If I view it in my browser and simply zoom in twice (CTL ++) the screen looks perfect once again.

Is there a JavaScript library that controls the zoom of the browser, based on the height of the viewport?

It only needs to work for Firefox, but cross-browser would be nice.

I'm aware that that is 'hacky', but that's perfectly fine in this situation.

I don't think this would take too much coding on my part, but I'm sure there's edge cases and fiddly bits here, and I'm trying to be as hands-off with this as I possible can be. Even if it's only a 10-liner, I'd prefer a library if one exists.

Thanks a lot.

Edit: I'm looking for a JS library that does this, preferably not a function.

Answer 1

You can find the answer in two different stackoverflow questions:

1. Get the browser viewport dimensions with JavaScript
2. Changing the browser zoom level

there You can find the info to build a javascript function which manipulates the zoom if needed something like:

(function(){
window.onload = InitializeWindow;

function InitializeWindow(){
    var viewPort = GetWindowViewPort();
    if(viewPort.width > 1400 and viewPort.height > 700) modifyWindowZoom(document.body, 200);
}
function GetWindowViewPort(){
    return {
        height: Math.max(document.documentElement.clientHeight, window.innerHeight || 0),
        width: Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
    };
}
function modifyWindowZoom(domElement, percentage){
    domElement.style["zoom"] = percentage + "%";
}

})();

Answer 2

It's hacky and requires jQuery.. but you could use:

if ($(window).height() > 800){
    $('html, body').css('transform', 'scale(2)');
}