調整窗口大小時，按比例縮小/放大每個html元素

Question

我想保持相同的布局而不是響應，但是在調整窗口屏幕大小時，請放大/縮小所有內容。

當屏幕較小時，字體/圖像可能很小，但這並不重要。 基本寬度為1920像素：

我正在工作的站點是：

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);

對於您的第二個問題：

您說您的基本寬度是“ 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 +")
    });
}

測試一下，讓我知道它是否有效