1

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

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

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

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

  1. 能够在没有用户的情况下实际访问缩放功能。

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

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

    <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;
}
4

3 回答 3

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/

于 2013-01-30T02:54:02.943 回答
0

也许这个脚本适合你。如果需要，该脚本还会计算滚动条的大小。您将需要一个带有包装器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);
}
于 2013-03-12T17:45:36.697 回答
0

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

于 2013-12-05T02:11:32.767 回答