Question

是否有任何方法（跨浏览器）导致我的网站根据用户的浏览器窗口自动缩放。

我有一个固定宽高比的网络应用。它必须是这种方式，因为中央功能（视频）旨在始终保持在屏幕上。我将使用带有内部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;
}

Answer 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);

DEMO：http://jsfiddle.net/hkdeA/

Answer 2

也许这个脚本适合你。如果需要，该脚本还calculate the scrollbar size。您需要一个带有包装 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);
}

Answer 3

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

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

3 个答案: