如果窗口不够大，则缩放（缩小）内容

Question

我是一个新手，正在开发一个支持物联网项目的网站，我有一个 div 我希望得到一个自动缩放脚本的支持，以防它不适合窗口（水平、垂直或两者兼有） )，更具体地说，如果内容大于窗口。下面我将向您展示相关 div 的 CSS。下面的代码使 div 水平和垂直居中：

div.container 
{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 100vh;
    margin: auto;
    display: grid;
    padding: 0;
    font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif;
}

我正在寻找某种自动缩小功能，因为策略性地放置了子 div，而仅更改父 div 的大小就会将展示位置分开。我将这个问题留在社区中，因为我使用的所有 CSS 和脚本都没有效果。我不知道它是否与浏览器有关，或者上面的 CSS 的某些行是否与我遇到的解决方案混淆了。理想情况下，我认为最好使用一些 javascript 或 jquery 来解决缩放问题，以防止 CSS 中出现更多混乱。但我对所有可能的解决方案持开放态度。先感谢您。

Answer 1

阅读此answer 如何在纯 JS 或 jQuery 中获取大小，然后阅读如何使用 CSS 或 plain JS 或 jQuery 中的 transform-scale div

别忘了不要弄乱用户的缩放。