javascript - 桌面 View 的视口(viewport)/自动缩放

Question

我设计了一个网站用作数字标牌 1920x1080 填满整个屏幕。

是否有这样的东西可以工作(有点像移动设备上的视口(viewport)工作)来缩放递归到所有子 DIV 等的所有文本/图像，就像您按 Ctrl - 放大浏览器设置一样。

我希望在页面加载或调整窗口大小时发生这种情况。它应该缩放到最佳可能的宽度高度以适应该桌面窗口的大小高度。

寻找 CSS 或 jquery 插件的选项。我用谷歌搜索但没有找到任何东西。

感谢您的帮助。

Answer 1

已解决 - 享受 CSS 变换比例 https://www.w3schools.com/css/css3_2dtransforms.asp

 function scalebody() {
                    var veiwwid = $(window).width() / 1920;
                    var veiwwidhh = $(window).height() / 1080;
                    if(veiwwidhh < veiwwid){veiwwid = veiwwidhh;}
                    $('body').css( {"transform": "scale("+veiwwid+")"});
                    var margintop =     ((1080 - $(window).height() )/2) *-1 ;
                    var marginleft =    ((1920 - $(window).width() )/2) *-1 ;
                    $('body').css( {"margin-top": margintop, "margin-left": marginleft});
            }

            $(document).ready(function(){scalebody();});
            $(window).resize(function() {scalebody();});