有什么方法可以根据用户的浏览器窗口自动缩放浏览器？答案

【问题标题】：Any way to auto zoom browser based upon user's browser window?有什么方法可以根据用户的浏览器窗口自动缩放浏览器？
【发布时间】：2013-01-30 01:57:55
【问题描述】：

有没有办法（跨浏览器）使我的网站根据用户的浏览器窗口自动缩放。

我有一个固定纵横比的网络应用。它需要这样，因为中心功能（视频）旨在始终保持在屏幕上。我将使用带有内部 div 的侧边栏来显示可滚动的内容。在下面查看我的代码或以下小提琴以查看基本结构：http://jsfiddle.net/hkdeA/6/

我目前以一种尺寸开发了这个，首先考虑将所有像素数据转换为百分比，即响应式设计，甚至包含基于浏览器窗口重新计算的 div（以适应 100% 高度或 100% 宽度） .然而，与大多数响应式设计不同，我页面上的每个元素都需要同等缩放。对我来说，这创造了一个独特的机会。大多数响应式设计永远无法利用浏览器缩放来完成这项工作，因为他们只希望某些元素放大或缩小。对我来说，一切都应该协调一致。遍历每一行 CSS 以将像素值转换为百分比是一件费时费力的事，我希望如果可能的话，我可以利用浏览器缩放。

但是，我是否可以访问浏览器缩放功能并缩放适合浏览器窗口所需的确切距离（高度或宽度，取决于浏览器窗口的纵横比）？我认为需要两个步骤。

能够在没有用户的情况下实际访问缩放功能。
能够计算必要的缩放（似乎很容易，因为我的设计是固定宽度，因此可以计算任何浏览器窗口大小并与我的设计和计算的必要缩放百分比进行比较）并将其推送到用户的浏览器（仅适用于我的网站！）

但这可能吗？第一个回复者说不，目前没有脚本可以做到这一点，但我希望看看其他人是否有一些见解。任何和所有的帮助表示赞赏。谢谢！

    <div id="container">
    <div id="vid">

    </div>
    <div id="sidebar">

    </div>
    <div id="footer">

    </div>    
</div>

#container{
    background:grey;
    width:480px;
    height:270px;
    float:left;
}

#vid{
    background:black;
    width:320px;
    height:180px;
    float:left;
}

#sidebar{
    background:blue;
    width:160px;
    height:180px;
    float:right;
}

#foot{
    background:yellow;
    width:480px;
    height:90px;
    float:left;
}

【问题讨论】：

标签： jquery css plugins cross-browser zooming

【解决方案1】：

您可以根据窗口尺寸和视频的纵横比调整任何元素的大小

var videoAspect= 600/400;/* normalWidth/normalHeight*/

var $window = $(window), windowW= $window.width(), windowH= $window.height();
var windowAspect= windowW/windowH;
var sizes={ }
if( windowAspect > videoAspect){
   /* wider so set height 100% and adjust width*/
    sizes.height=windowH;
    sizes.width = windowH * videoAspect;
}else{
    sizes.width=windowW;
    sizes.height = windowW / videoAspect; 
}

$('#container').css( sizes);

演示：http://jsfiddle.net/hkdeA/

【讨论】：

谢谢你的例子。如果视频只是父容器中的特定片段怎么办？我需要最外层的容器根据高度/宽度并以一定的比例进行更改...然后需要遵循内部的所有内容，每个元素，每一行文本等...我更新了 CSS 和 HTML 以显示我的内容意思是。你能帮我让那个外部“容器”根据浏览器窗口放大和缩小吗？
什么html和css？未发布。
jsfiddle.net/hkdeA/4 抱歉！您会注意到我可以正确更改外部容器。但我希望里面的所有元素都按比例增长。我知道我可以将每个元素都设为 %（然后它最终会相对于不断调整大小的外部容器发生变化）。但是，遍历每一行 CSS 将是一件令人头疼的事情。我希望有另一种方式。
不确定元素应该做什么。使用百分比宽度最有意义
包含 div 中的所有元素，即我的整个 Web 应用程序，都需要按比例放大/缩小。我认识到我可以使用您提供的代码（谢谢）来调整外部容器的大小，然后让我的 CSS 以 % 的形式制作每个元素。但是，将每个元素都设置为 % 将非常耗时。此外，我认为以某种方式使用浏览器缩放会是一个更有效的过程吗？所以，仍然想知道这是否可能。

【解决方案2】：

也许这个脚本适合你。如果需要，该脚本也可以calculate the scrollbar size。您将需要一个带有 wrapper id 的块（div、span 等...）。

这是一个跨浏览器脚本，它支持所有现代浏览器。

希望你喜欢。随意使用！

// DONT FORGET TO ADD THIS TO YOUR WRAPPER'S CSS BLOCK
// THIS WILL KEEP YOUR SITE CENTERED
// IF YOU USE margin-left:auto; margin-right:auto;

// transform-origin: 50% 0%;
// -ms-transform-origin: 50% 0%;
// -moz-transform-origin: 50% 0%;
// -webkit-transform-origin: 50% 0%;
// -o-transform-origin: 50% 0%;

function FitToScreen(FitType)
{
    var Wrapper = document.getElementById('wrapper');

    var ScreenWidth = window.innerWidth;
    var ScreenHeight = window.innerHeight;

    var WrapperWidth = Wrapper.offsetWidth;
    var WrapperHeight = Wrapper.offsetHeight + 200;

    var WidthRatio = parseFloat(ScreenWidth/WrapperWidth);
    var HeightRatio = parseFloat(ScreenHeight/WrapperHeight);

    var ScaleRatio = 1.0;

    if (FitType == 'width')
    {
        ScaleRatio = WidthRatio;
        if(ScaleRatio * WrapperHeight > ScreenHeight)
        {
            ScaleRatio = parseFloat(ScreenWidth/(WrapperWidth + GetScrollBarWidth () -1));
        }
    }
    else if (FitType == 'height')
    {
        ScaleRatio = HeightRatio;
        if(ScaleRatio * WrapperWidth > ScreenWidth)
        {
            ScaleRatio = parseFloat(ScreenHeight/(WrapperHeight + GetScrollBarWidth () -1));
        }
    }

    var ScaleText = 'scale(' + ScaleRatio.toString().replace(',','.') + ')';

    //Chrome and Safari
        Wrapper.style.webkitTransform = ScaleText;
    //Firefox
        Wrapper.style.MozTransform = ScaleText;
    //Internet Explorer
        Wrapper.style.msTransform = ScaleText;
    //Opera
        Wrapper.style.OTransform = ScaleText;
    //Standard
        Wrapper.style.transform = ScaleText;
}

function GetScrollBarWidth ()
{
    var inner = document.createElement('p');
    inner.style.width = '100%';
    inner.style.height = '200px';

    var outer = document.createElement('div');
    outer.style.position = 'absolute';
    outer.style.top = '0px';
    outer.style.left = '0px';
    outer.style.visibility = 'hidden';
    outer.style.width = '200px';
    outer.style.height = '150px';
    outer.style.overflow = 'hidden';
    outer.appendChild (inner);

    document.body.appendChild (outer);
    var w1 = inner.offsetWidth;
    outer.style.overflow = 'scroll';
    var w2 = inner.offsetWidth;
    if (w1 == w2) w2 = outer.clientWidth;

    document.body.removeChild (outer);
    return (w1 - w2);
}

【讨论】：

【解决方案3】：

您可以使用视口来控制缩放。试试this

【讨论】：