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

【问题标题】：Proportionally scale website to fit browser window按比例缩放网站以适应浏览器窗口
【发布时间】：2022-02-21 09:44:16
【问题描述】：

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

假设基本布局为 720x500px

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

基本上，就像这个 Flash 插件一样运行：http://site-old.greensock.com/autofitarea/（尽管基本大小是已知的）

站点将在该 720x500 区域中包含几种不同类型的元素...理想的解决方案只是缩放整个事物，而不需要设置每个单独元素的样式（以防万一——图像将是 SVG，因此缩放应该没有对分辨率的负面影响）

【问题讨论】：

您是真的希望内容缩放，还是只是希望页面侧面的装订线随着窗口大小的调整而增大/缩小？
你试过引导程序吗？ BootStrap
你能分享一下你已经尝试过的东西吗？

标签： javascript html css

【解决方案1】：

根据您需要支持的浏览器 (IE9+)，您可以通过简单的CSS transform 来实现。

查看this jsfiddle中的示例（使用jQuery）

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

如果您需要向后兼容，您可以使用% 或em 调整网站中所有内容的大小，并使用类似的javascript 来控制比例。不过我觉得那会很费力。

【讨论】：

嗨 Hugo，我对 HTML 还是很陌生。我正在尝试做同样的事情，只是在一个 html 文件中。你能告诉我我做错了什么吗？ gist.github.com/mkanet/a8c3a163dbc596a915e6d04b0aa70f4f
@MKANET 它在抱怨 $ 符号吗？此代码依赖于 jQuery。它在 2015 年是一个非常受欢迎的库，几乎出现在每个项目中。您可以加载库，或将此代码重写为纯 javascript。

【解决方案2】：

我正在使用的一个解决方案是使用一个容器，我在其中放置一个 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>

【讨论】：