移动端响应rem dpr viewport设置

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/running_shuai/article/details/75990623

(function () {

      var t;

      function initHtmlFont(){

          var maxWidth = 640;

          var html = document.documentElement;

          var windowWidth = html.clientWidth;

            var windowWidth = html.clientWidth>maxWidth?maxWidth:html.clientWidth;

         

          html.style.fontSize = (windowWidth/640)*200+'px';  

      }

      window.onresize = function(){

        clearTimeout(t);

        t = setTimeout(initHtmlFont,250);

      }

      document.addEventListener('DOMContentLoaded', function () {

        initHtmlFont();

      }, false);

    })();




var dpr, rem, scale;

var docEl = document.documentElement;

var fontEl = document.createElement('style');

var metaEl = document.querySelector('meta[name="viewport"]');


dpr = window.devicePixelRatio || 1;

rem = docEl.clientWidth * dpr / 10;

scale = 1 / dpr;



// 设置viewport,进行缩放,达到高清效果

metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');


// 设置data-dpr属性,留作的css hack之用

docEl.setAttribute('data-dpr', dpr);


// 动态写入样式

docEl.firstElementChild.appendChild(fontEl);

fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}';


// js调用的,某一dprrempx之间的转换函数

window.rem2px = function(v) {

    v = parseFloat(v);

    return v * rem;

};

window.px2rem = function(v) {

    v = parseFloat(v);

    return v / rem;

};


window.dpr = dpr;

window.rem = rem;

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页