Javascript 按比例缩放网站以适应浏览器窗口

什么是一个优雅的解决方案，可以按比例缩放和集中整个网站，以适应浏览器窗口（并在重新调整大小时更新）

假设基本布局为720x500px

内容应按比例缩放以适应，然后重新居中

从本质上讲，就像这个Flash插件一样操作：（虽然基本大小是已知的）

---

该站点将在720x500区域中包含几种不同类型的元素。。。理想的解决方案是缩放整个内容，而不需要为每个单独的元素设置样式（如果有关系，图像将是SVG，因此缩放应该不会对分辨率产生负面影响）

我使用的一个解决方案是使用一个容器，在其中我放置了一个iframe，该iframe正在调整大小，以尽可能适合可用屏幕，而不会丢失其比例。它工作得很好，但并不完全灵活：如果您想让它工作，您需要在%的内容页中设置维度。但是如果你能用这种方式管理你的页面，我认为它能满足你的需求

事情是这样的。您创建的容器html页面基本上只包含样式、调整大小脚本和iframe调用。您的内容将进入iframe页面

<style>
        html, body
        {
            border: 0px;margin: 0px;
            padding:0px;
        }
        iframe
        {
            display: block; 
            border: 0px;
            margin: 0px auto;
            padding:0px;
        }
</style>

<script>
    $(document).ready(function(e){
        onResizeFn();           
    });
    $(window).resize(function(e){
        onResizeFn();
    });

    // this stretches the content iframe always either to max height or max width
    function onResizeFn(){

        var screen_ratio = 0.70 // this is your 720x500 ratio

        if((window.innerHeight/window.innerWidth) > screen_ratio){
            var theWidth = window.innerWidth 
            var theHeight = (window.innerWidth*screen_ratio);
        } else {
            var theHeight = window.innerHeight;
            var theWidth = (window.innerHeight/screen_ratio);
        }

        document.getElementById("your_iframe").width = theWidth + "px"
        document.getElementById("your_iframe").height = theHeight + "px"        
    }

</script>

// And then you call your page here
<iframe id='your_iframe' src='your_content_page' scrolling='no' frameborder='0'"></iframe>

html，正文
{
边框：0px；边距：0px；
填充：0px；
}
iframe
{
显示：块；
边界：0px；
保证金：0px自动；
填充：0px；
}
$（文档）.ready（函数（e）{
onResizeFn（）；
});
$（窗口）。调整大小（函数（e）{
onResizeFn（）；
});
//这将始终将内容iframe拉伸到最大高度或最大宽度
函数onResizeFn（）{
var screen_ratio=0.70//这是您的720x500比率
if（（window.innerHeight/window.innerWidth）>屏幕比例）{
var theWidth=window.innerWidth
var theHeight=（window.innerWidth*屏幕比例）；
}否则{
var theHeight=window.innerHeight；
var theWidth=（窗口内部高度/屏幕宽度比率）；
}
document.getElementById（“您的iframe”）.width=宽度+“px”
document.getElementById（“您的iframe”）.height=theHeight+“px”
}
//然后你在这里呼叫你的页面
根据您需要支持的浏览器（IE9+），您可以使用simple来实现这一点

请参见中的示例

var$win=$（窗口）；
var$lay=$（“#布局”）；
var baseSize={
w:720，
h:500
}
函数updateScale（）{
var ww=$win.width（）；
var wh=$win.height（）；
var-newScale=1；
//比较比率
if（ww/wh

如果需要向后兼容，可以使用
%
或
em
调整站点中的所有内容，并使用类似的javascript控制规模。但我认为这将是非常困难的。
您是真的希望内容按比例缩放，还是只希望页面侧边的水槽随着窗口大小的调整而增大/缩小？您尝试过引导吗？你能分享你已经尝试过的吗？
var $win = $(window);
var $lay = $('#layout');
var baseSize = {
    w: 720,
    h: 500    
}

function updateScale() {

    var ww = $win.width();
    var wh = $win.height();
    var newScale = 1;

    // compare ratios
    if(ww/wh < baseSize.w/baseSize.h) { // tall ratio
        newScale = ww / baseSize.w;
    } else { // wide ratio
        newScale = wh / baseSize.h;        
    }

    $lay.css('transform', 'scale(' + newScale + ',' +  newScale + ')');

    console.log(newScale);
}

$(window).resize(updateScale);