浏览器适配计算

adapterFunc(){

     (function (win) {

          document.body.style.zoom = 1;

          // document.body.style = `width:1920px!important; height:960px!important;overflow: hidden`;

          function refreshScale () {

          let docWidth = document.documentElement.clientWidth;

          let docHeight = document.documentElement.clientHeight;

          var designWidth = 1920,

               designHeight = 960,

               widthRatio = docWidth / designWidth,

               heightRatio = docHeight / designHeight;

               document.body.style.zoom = widthRatio;

               // document.body.style = "width:1920px!important; height:960px!important;transform:scale(" + widthRatio + "," + heightRatio + ");transform-origin:left top;";  

               // 应对浏览器全屏切换前后窗口因短暂滚动条问题出现未占满情况

               setTimeout(function () {

                    var lateWidth = document.documentElement.clientWidth,

                    lateHeight = document.documentElement.clientHeight;

                    if (lateWidth === docWidth) return;

                    widthRatio = lateWidth / designWidth;

                    heightRatio = lateHeight / designHeight;

                    document.body.style.zoom = widthRatio;

                    // document.body.style = "width:1920px!important; height:960px!important;transform:scale(" + widthRatio + "," + heightRatio + ");transform-origin:left top;";

               }, 0);

          };

          refreshScale();

          win.addEventListener("pageshow", function (e) {

          if (e.persisted) { // 浏览器后退的时候重新计算

               refreshScale();

          }

          }, false);

          win.addEventListener("resize", refreshScale, false);

     })(window);

}

(function (win) {

        var bodyStyle = document.createElement('style')

        bodyStyle.innerHTML = `body{width:11; height:222;overflow: hidden}`

        document.documentElement.firstElementChild.appendChild(bodyStyle)

        function refreshScale () {

          let docWidth = document.documentElement.clientWidth;

          let docHeight = document.documentElement.clientHeight;

          var designWidth = 1920,

            designHeight = 1080,

            widthRatio = docWidth / designWidth,

            heightRatio = docHeight / designHeight;

          document.body.style = "transform:scale(" + widthRatio + "," + heightRatio + ");transform-origin:left top;"

          // 应对浏览器全屏切换前后窗口因短暂滚动条问题出现未占满情况

          setTimeout(function () {

            var lateWidth = document.documentElement.clientWidth,

              lateHeight = document.documentElement.clientHeight;

            if (lateWidth === docWidth) return;

            widthRatio = lateWidth / designWidth

            heightRatio = lateHeight / designHeight

            document.body.style = "transform:scale(" + widthRatio + "," + heightRatio + ");transform-origin:left top;"

          }, 0)

        }

        refreshScale()

        win.addEventListener("pageshow", function (e) {

          if (e.persisted) { // 浏览器后退的时候重新计算

            refreshScale()

          }

        }, false);

        win.addEventListener("resize", refreshScale, false);

      })(window)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值