JavaScript库/技巧缩放以使页面内容与视图相匹配？

Question

我有一个HTML/CSS屏幕，当在一个典型的笔记本显示器上进行完全屏幕时，它看起来/工作得很好。

然而，它是使用静态大小和许多sizes /JS黑客构建的。这意味着当它在更大的显示器上打开时，它看起来很小。

在更大的显示器上，如果我在浏览器中查看它，并且只放大两次(CTL ++)，屏幕看起来再次完美。

是否有基于视口高度控制浏览器缩放的JavaScript库？

它只需要为Firefox工作，但是跨浏览器会更好。

我知道这是“无趣”，但在这种情况下这是很好的。

我不认为这将需要太多的编码，但我相信这里有边缘情况和微妙的部分，我正在尽我所能地处理这个问题。即使只有10条线，如果有库的话，我也会更喜欢。

非常感谢。

编辑:我正在寻找一个JS库来实现这个功能，最好不是函数。

Answer 1

它很烦人，需要jQuery..。但你可以：

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

Answer 2

您可以在两个不同的堆栈溢出问题中找到答案：

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

在那里，您可以找到用于构建javascript函数的信息，该函数在需要时可以操作缩放，如下所示：

(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 + "%";
}

})()；