JavaScript库/技巧可以缩放以使页面内容适合视口?

时间:2015-06-30 09:11:34

标签: javascript html css

我有一个HTML / CSS屏幕,在典型的笔记本电脑显示器上进行全屏显示时效果很好。

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

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

是否有一个JavaScript库根据视口的高度控制浏览器的缩放?

它只需要适用于Firefox,但跨浏览器会很好。

我知道那是“hacky'”,但在这种情况下,这完全没问题。

我不认为这会占用我太多的代码,但我确定这里存在边缘情况和繁琐,并且我试图成为一只手我可以这样做。即使它只有10个班轮,如果有的话,我更喜欢图书馆。

非常感谢。

编辑:我正在寻找一个能够做到这一点的JS库,最好不是一个函数。

2 个答案:

答案 0 :(得分:0)

它很hacky并且需要jQuery ..但你可以使用:

Could not connect to net.tcp://localhost:2660/CoreService/2011/netTcp. The connection attempt lasted for a time span of 00:00:01.0520000. TCP error code 10061: No connection could be made because the target machine actively refused it localhost:2660.

答案 1 :(得分:-1)

您可以在两个不同的stackoverflow问题中找到答案:

  1. Get the browser viewport dimensions with JavaScript
  2. Changing the browser zoom level
  3. 那里你可以找到建立一个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 + "%";
    }
    

    })();