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

Question

I want to do the scaling depending on only width. I don't wanna mess with height. I have a website which unfortunately I made it for a way bigger display size. I didn't know how the adobe xd artboard size was too big. I thought it was 1920px but actually the width of my website is 3554px. I want to scale it down to fit smaller screens and scale it up for bigger screens. I can only make it fit in my laptop screen but I don't know the calculation behind for how to make it work for any screen. Basically I want scale to fit width and center the page horizontally. So everything is kinda based on width. The base width is 3554px. Please help me on how to do this using plain javascript?

Please check this link. Want to do something with plain javascript but using only width and keeping it at center position. Proportionally scale website to fit browser 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;
    }

This is the main div that should take the whole inner width.

JAVASCRIPT

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

I can get the inner width but those transform properties only work for my particular screen. How can I get the transform values dynamically to fit the page on any screen and keep it at the canter? No need to do anything with the height because there will be scrollbar.

Answer 1

Abhay Srivastav's solution is working fine. A lot of thanks to him. The solution is like below. It's proportional scaling depending on width only. Everything will remain horizontally centered. Upscaling downscaling works for screen size. Window resize also works fine.

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";
}

This piece of code can save you from putting additional thousand lines of plugin code. Page becomes lighter, loads faster and significant performance improvements.