如何缩放网站以使其对所有视口显示相同的可见区域？

Question

我为视口 1366px*768px 制作了一个网站。现在我希望当我调整浏览器大小时它应该在不破坏设计的情况下在移动设备或更大的屏幕上显示相同的网站，我不想要响应式网站。

示例：

当我以 360px420px 视口打开网站时，我的网站会缩小并显示准确的可见区域，如 1366px768px 没有任何滚动条。
当我以 2000px1000px 视口打开网站时，我的网站会按比例放大并显示与 1366px768px 一样的准确可见区域，没有任何额外的 space .

我试过了

<meta name="viewport" content="width=1366, initial-scale=1" />

 const siteWidth = 1366;
      const scale = screen.width / siteWidth;
      document
        .querySelector('meta[name="viewport"]')
        .setAttribute(
          'content',
          'width=' + siteWidth + ', initial-scale=' + scale + ''
        );
    }

通过使用上面的代码，我可以根据宽度缩放网站，即移动设备上的 1366px，但在改变高度时，它会在底部显示额外的 space 或滚动条。它也不适用于桌面。

有什么好的解决方案可以使我的网站针对所有视口正确缩放吗？

Answer 1

下面的解决方案有效，但您需要考虑删除滚动条或进行微调以添加滚动条以进行缩放。

<body>
  <div class="container">
    <!-- All other elements should be here -->
  </div>
</body>

body {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.container {
  width: 1366px;
  height: 768px;
}

const siteWidth = 1366;
const scale = window.innerWidth / siteWidth;

document.querySelector(".container").style.transform = `scale(${scale})`;

如何缩放网站以使其对所有视口显示相同的可见区域？

How to scale a website so that it show same visible area for all viewports?

html

javascript

css

frontend

web-deployment