Viewport / Autozoom用于桌面视图

时间:2018-04-09 16:38:59

标签: javascript jquery css

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

是否有这样的事情可以工作(有点像视频在移动设备上工作)来缩放递归到所有子DIV的所有文本/图像,就好像你按下Ctrl一样 - 放大你的浏览器设置。

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

在CSS或jquery插件中查找选项。我用Google搜索,没有找到任何东西。

感谢您的帮助。

1 个答案:

答案 0 :(得分:0)

已解决 - 享受 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();});