移动端屏幕适配——通用适配方案

html字体大小随屏幕大小的改变而改变，封装函数如下：

 通用适配中解决了边框1px的问题。

(function(){
                'use strict';
                
                // dpr->scale = 1/dpr
                var docEl = document.documentElement,
                    viewportEl = document.querySelector('meta[name="viewport"]'),
                    dpr = window.devicePixelRatio || 1,
                    maxWidth = 540,
                    minWidth = 320;
                    
                dpr = dpr >= 3?3 : (dpr>=2?2 :1);
                docEl.setAttribute('data-dpr',dpr);
                docEl.setAttribute('max-width',dpr);
                docEl.setAttribute('min-width',dpr);
                
                var scale = 1/dpr,
                    content = 'width=device-width,initial-scale='+ scale +',maximum-scale='+ scale +',minimum-scale='+ scale +',user-scalable=no';
                if(viewportEl){
                    viewportEl.setAttribute('content',content);
                }else{
                    viewportEl = document.createElement('meta');
                    viewportEl.setAttribute('name','viewport');
                    viewportEl.setAttribute('content',content);
                    document.head.appendChild(viewportEl);
                }
                
                
                setRemUnit();
                window.addEventListener('resize',setRemUnit);
                function setRemUnit(){
                    var ratio = 18.75;
                    var viewWidth = docEl.getBoundingClientRect().width || window.innerWidth;
                    
                    if(maxWidth && (viewWidth/dpr > maxWidth)){
                        viewWidth = maxWidth * dpr;
                    }else if(minWidth && (viewWidth/dpr < minWidth)){
                        viewWidth = minWidth * dpr;
                    }
                    
                    docEl.style.fontSize = viewWidth / ratio + 'px';
                }
            })();

 

转载于:https://www.cnblogs.com/rickdiculous/p/11565197.html