2015-09-29 152 views
1

我想保留相同的佈局而不是響應式,但是在調整窗口大小的時候放大/縮小所有內容。當窗口調整大小時,縮小/放大每個html元素

當屏幕尺寸很小但是沒關係時,字體/圖像可能非常小。底座寬度爲1920px:

而且我工作的網站是:

kotechweb.com/new_focus/page/about_us 

我試圖在header.php中

<meta id="meta" name="viewport" content="width=device-width; initial-scale=0.1; maximum-scale=2.0; user-scalable=0;"> 

和jQuery

$(window).resize(function() { 
        var width = $(window).innerWidth()/1920; 
        $("#meta").attr("content", "width=device-width; initial-scale=" + width + "; maximum-scale = 1.0; user - scalable = 0; "); 
       }); 

但對於桌面瀏覽器似乎沒有影響,感謝您的幫助。

回答

2

嘗試的CSS添加到您的身體

-moz-transform: scale(0.5); 
-webkit-transform: scale(0.5); 
transform: scale(0.5); 

爲了您Seconde系列問題:

你說你的基地寬度是「1920」,所以1920是100% 所以你要做的是什麼

calculateNewScale(); // if the user go to the page and his window is less than 1920px 
$(window).resize(function() 
{ 
    calculateNewScale(); 
}); 

function calculateNewScale() 
{ 
    var percentageOn1 = $(window).width()/1920) ; 
    $("body").css(
    { 
     "-moz-transform": "scale("+percentageOn1 +")", 
     "-webkit-transform": "scale("+percentageOn1 +")", 
     "transform": "scale("+percentageOn1 +") 
    }); 
} 

測試,讓我知道,如果它

+0

感謝您的回覆!它正確地擴展一切,但我不知道它如何與jQuery的工作?例如,如何定義比例尺數量以及如何擬合屏幕的高度和寬度? – user782104

+0

我會編輯我的答案爲您的問題 – Diptox

+0

將檢查後,我從辦公室回來,非常感謝 – user782104

相關問題