要使页面内容适合视口的JavaScript库/技巧？

Question

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

但是，它是使用静态大小和many-a-css/JS hack构建的。这意味着当它在更大的显示器上打开时，它看起来很小。

在更大的显示器上，如果我在浏览器中查看它，只需放大两倍（CTL ++），屏幕再次显示完美。

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

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

我知道那就是'hacky'，但在这种情况下这是完美的。

我不认为这会花费太多的代码，但我敢肯定，这里有边缘情况和烦琐的位，我试图像我那样尽可能的放手，因为我可能会。即使它只是一个10行，我宁愿一个图书馆，如果存在。

非常感谢。

编辑：我正在寻找一个JS库，这样做，最好不是一个函数。

Answer 1

你可以在两个不同的计算器问题的答案：

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

}）（）;

Answer 2

这是哈克，需要jQuery的..但是你可以使用：

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