大屏自適應使用transform scale解決了

關鍵代碼

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;

我的設在html標籤上

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章