JavaScript庫/技巧可以縮放以適合頁面內容到視口？

Question

我有一個HTML / CSS屏幕，當在典型的筆記本電腦顯示器上全屏顯示時，它看起來/效果很好。

但是，它是使用靜態大小和many-a-css / JS hack構建的。 這意味着在較大的顯示器上打開它時，它看起來很小。

在更大的顯示器上，如果我在瀏覽器中查看它，然后簡單地放大兩次（CTL ++），屏幕將再次看起來很完美。

是否存在一個基於視口高度控制瀏覽器縮放的JavaScript庫？

它只需要適用於Firefox，但跨瀏覽器會很好。

我知道那是“ hacky”，但是在這種情況下完全可以。

我不認為這會花費太多的編碼在我的一部分，但我敢肯定有優勢情況下和繁瑣位這兒，我想是因為放手這個，因為我可能可以。 即使是只有10套，我想如果有喜歡的庫。

非常感謝。

編輯：我正在尋找一個這樣做的JS庫，最好不是一個函數。

Answer 1

它很hacky，需要jQuery ..但您可以使用：

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

Answer 2

您可以在兩個不同的stackoverflow問題中找到答案：

1. 使用JavaScript獲取瀏覽器視口尺寸
2. 更改瀏覽器縮放級別

在那里，您可以找到信息來構建一個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 + "%";
}

}）（）;