按比例縮放的網站，以適應瀏覽器窗口

什麼將是一個完美的解決方案，以按比例比例和中心的整個網站，以適應瀏覽器窗口（和更新，因爲它的重新調整大小）按比例縮放的網站，以適應瀏覽器窗口

假設基地佈局是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

按比例縮放的網站，以適應瀏覽器窗口

回答

相關問題