縮放和居中網頁以適應任何設備/窗口尺寸

我有一個網絡應用程序（科爾多瓦），我設計了一個特定的寬度和高度。我希望文檔正文可以縮小以適應不管使用什麼設備（手機，平板電腦，瀏覽器）。如果設備大於我設計的尺寸，則文檔主體不應該放大，而應該放在窗口中央。我認爲我可以縮小比例，但我似乎無法讓身體和內容垂直和水平居中。縮放和居中網頁以適應任何設備/窗口尺寸

這裏是一個演示（小300x400尺寸演示）：

http://jsfiddle.net/D2e4W/

調整的結果窗口中看到它重新調整。我有垂直工作（只有鉻），但水平收縮導致它向右移動。我開放的方法完全不同於我在這裏得到的。

培訓相關代碼：

<body> 
    <div id='div1'></div> 
</body> 

<script> 
var max_width = 300; 
var max_height = 400; 
window.addEventListener('resize', on_window_resize); 
on_window_resize(); 

function on_window_resize() 
{ 
    //if either window dimension is less than max, scale body to fit 
    var h_scale = window.innerHeight/max_height; 
    var w_scale = window.innerWidth/max_width;   
    var page_scale = 1; 
    if (h_scale < 1 || w_scale < 1) 
    { 
     page_scale = (h_scale < w_scale) ? h_scale : w_scale; 
    } 

    //display scale string  
    var div1 = document.getElementById('div1'); 
    div1.innerHTML = "scale: " + page_scale.toFixed(2); 


    //scale body using webkit transforms 
    var scale_str = "scale(" + page_scale + ")"; 

    document.body.style.webkitTransform = scale_str; 
    document.body.style.transform  = scale_str;  
    //document.body.style.webkitTransformOrigin = "0 0"; 
    //document.body.style.transformOrigin = "0 0"; 

    //div1.style.webkitTransform = scale_str; 
    //div1.style.transform  = scale_str; 
    //div1.style.webkitTransformOrigin = "0 0"; 
    //div1.style.transformOrigin = "0 0"; 

} 
</script> 

<style> 
body 
{ 
    overflow:hidden;  
    background-color: #444444; 

    position: absolute; 
    top:0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto;  
} 

#div1 
{ 
    overflow = 'hidden'; 
    width: 300px; 
    height: 400px; 
    background-color: #dd4444; 
    font-size: 60px; 

    position: absolute; 
    top:0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto; 
} 
</style>

來源

2014-05-16 learnworkplay

更合適的方式來做到這將是基於窗口/視圖的尺寸調整的樣式媒體查詢CSS：

例如您的300x400箱：

body 
{ 
    overflow:hidden;  
    background-color: #444444; 

    position: absolute; 
    top:0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto;  
} 

#div1 
{ 
    overflow = 'hidden'; 
    width: 150px; 
    height: 200px; 
    background-color: #dd4444; 
    font-size: 60px; 

    position: absolute; 
    top:0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto; 
} 

@media all and (min-width: 300px) and (max-width:1000px) { 
    #div1 { 
    width: 300px; 
    height: 400px; 
    background-color: green; 
    } 
}

小提琴：http://jsfiddle.net/44aAy/2/

當窗口的寬度至少爲300像素，但不超過1000像素時，該框會改變大小並變爲綠色。再次使箱子變小，它是紅色的。

有一些框架，比如Twitter Bootstrap，Skeleton和其他內置響應式網頁設計的框架。

來源

2014-05-16 19:55:23

看來設置的寬度迫使它出現在右邊。

來源

2014-05-16 20:02:06 Will

縮放和居中網頁以適應任何設備/窗口尺寸

回答

相關問題