首页 > 技术文章 > 前端实现大屏的简单思路

deng-jie 2020-10-16 14:33 原文

function resize() {
   var ratioX = $(window).width() / 11520;
   var ratioY = $(window).height() / 4320;
   $("body").css({
      transform: "scale(" + ratioX + "," + ratioY + ")",
      transformOrigin: "left top",
      backgroundSize: "100% 100%"
   });
   $("html").css({'overflow':'hidden'})
}
 
$(window, document).resize(function () {
   resize();
});
resize();

  

11520目标屏宽度,4320目标屏高度,其他屏相对缩放充满全屏。

解决空白问题把外层设置为overflow: hidden;

推荐阅读