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

什么将是一个完美的解决方案，以按比例比例和中心的整个网站，以适应浏览器窗口（和更新，因为它的重新调整大小）按比例缩放的网站，以适应浏览器窗口

假设基地布局是720x500px

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

本质上说，像这样的Flash插件运行：http://site-old.greensock.com/autofitarea/（尽管底座尺寸是已知的）

网站将包含几种不同类型的在720x500区域元素......理想的解决办法只是扩展了整个事情，不需要来设计每个单独的元素（如果它很重要 - 图像将是SVG，所以缩放应该对分辨率没有负面影响）

来源

2015-05-08 davidkomer

您是否真的想要缩放内容，还是只希望窗口大小调整时页面边缘的边界增大/缩小？ –

你试过bootstrap了吗？ [BootStrap]（http://getbootstrap.com/） –

你可以分享你已经尝试过的吗？ – akshay

根据需要支持（IE9 +）的浏览器，你可以做到这一点简单的CSS transform。

见this jsfiddle

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来控制规模。我认为这将是非常费力的。

来源

2015-05-08 05:02:21

谢谢，完美的作品:) – davidkomer

我正在使用的一种解决方案是使用容器，在该容器中放置了正在调整大小的iframe尽可能地适应可用的屏幕而不会丢失它的比例。它运作良好，但并不完全灵活：如果您希望它能够正常工作，则需要在内容页面中设置尺寸。但如果你可以用这种方式管理你的页面，我认为它几乎可以满足你的需求。

它是这样的。你创建一个基本上只有样式，调整大小脚本和iframe调用的容器html页面。你的内容进入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>

来源

2015-05-08 04:36:48

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

回答

相关问题