javascript - 如果窗口不够大，则缩放(缩小)内容

Question

我是开发网站以支持 IoT 元素的新手，我有一个 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 中获取大小，然后阅读如何 transform-scale你的 div 使用 CSS 或 plain JS或 jQuery

只是不要忘记不要干扰用户的缩放。