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

对于你的借口问题：

你说你的基本宽度是“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 +")
    });
}

测试它，让我知道它是否有效

在窗口调整大小

1 个答案: