如何使用内部宽度按比例缩放我的网页以适应任何显示尺寸？

Question

我想仅根据宽度进行缩放。 我不想搞砸身高。 我有一个网站，不幸的是我做了一个更大的显示尺寸。 我不知道 adobe xd 画板尺寸太大了。 我以为是 1920 像素，但实际上我网站的宽度是 3554 像素。 我想缩小它以适应较小的屏幕并扩大它以适应更大的屏幕。 我只能让它适合我的笔记本电脑屏幕，但我不知道如何让它适用于任何屏幕的计算。 基本上我希望缩放以适应宽度并将页面水平居中。 所以一切都基于宽度。 基本宽度为 3554 像素。 请帮助我如何使用普通的 javascript 做到这一点？

请检查此链接。 想用普通的 javascript 做一些事情，但只使用宽度并将其保持在中心 position。 按比例缩放网站以适应浏览器 window

CSS

#Web_1920__1 {
        position: absolute;
        width: 3554px;
        height: auto;
        border: 0px grey solid;
        background-color: rgba(255,255,255,0);
        overflow: visible;
        visibility: visible;
    }

这是应该占据整个内部宽度的主要 div。

JAVASCRIPT

const mypage = window.innerWidth;
document.getElementById("Web_1920__1").style.transform = "scale(0.432)";
document.getElementById("Web_1920__1").style.transformOrigin = "0% 0%";

我可以获得内部宽度，但这些变换属性仅适用于我的特定屏幕。 如何动态获取转换值以适应任何屏幕上的页面并将其保持在慢跑状态？ 不需要对高度做任何事情，因为会有滚动条。

Answer 1

Abhay Srivastav 的解决方案运行良好。 非常感谢他。 解决方案如下所示。 它的比例缩放仅取决于宽度。 一切都将保持水平居中。 放大缩小适用于屏幕尺寸。 Window 调整大小也可以正常工作。

JAVASCRIPT

document.addEventListener('DOMContentLoaded', updateMe);
window.addEventListener('resize', updateMe);

function updateMe() 
{   
    const mypage = window.innerWidth;
    document.getElementById("Web_1920__1").style.transform = "scale("+mypage/3554+")";
    document.getElementById("Web_1920__1").style.transformOrigin = "0 0";
}

这段代码可以让您免于添加额外的数千行插件代码。 页面变得更轻、加载更快并且性能显着提高。