当窗口调整大小时，缩小/放大每个html元素

Question

我想保留相同的布局而不是响应式，但是在调整窗口大小的时候放大/缩小所有内容。

当屏幕尺寸很小但是没关系时，字体/图像可能非常小。底座宽度为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; "); 
       }); 

但对于桌面浏览器似乎没有影响，感谢您的帮助。

Answer 1

尝试的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 +") 
    }); 
} 

测试，让我知道，如果它