移动端手机和平板适配解决方案

;(function(win, lib){ var doc = win.document; var docEl = doc.documentElement; var metaEl = doc.querySelector('meta[name="viewport"]'); var firstHeadEl = doc.getElementsByTagName('head')[0]; var initDpr = 0; var dpr = 0; var scale = 0; var tid; // 重置默认样式 var cssText = '@charset "utf-8";html{color:#000;background-color:#fff;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html *{outline:0;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}html,body{font-family:sans-serif}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}del{text-decoration:line-through}address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:500}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:500}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}a:hover{text-decoration:underline}ins,a{text-decoration:none}canvas,img{vertical-align:top}'; var styleEl = doc.createElement('style'); firstHeadEl.appendChild(styleEl); try{ styleEl.innerHTML = cssText; }catch(e){ styleEl.innerText = cssText; } // 移动端判断 function isMobile(){ return /(iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Windows Phone)/i.test(win.navigator.userAgent); } function refreshRem(){ var devicePixelRatio = win.devicePixelRatio; if(devicePixelRatio >= 1){ dpr = devicePixelRatio; }else{ dpr = 1; } if(initDpr !== dpr){ docEl.setAttribute('data-dpr', dpr); initDpr = dpr; lib.dpr = dpr; scale = 1 / dpr; if(!metaEl){ metaEl = doc.createElement('meta'); firstHeadEl.appendChild(metaEl); metaEl.setAttribute('name', 'viewport'); metaEl.setAttribute('content', 'width=device-width, initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no'); }else{ metaEl.setAttribute('content', 'width=device-width, initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no'); } } var wid = docEl.getBoundingClientRect().width; // 默认为竖屏 // 移动端长屏处理(例如，18:9等) if(window.innerWidth / window.innerHeight > 16 / 9){ wid = Math.floor(window.innerHeight * 16 / 9); } // 适配平板中的宽屏(4 * 3), 实际要减去状态栏的高度。 if(window.innerHeight < window.innerWidth && window.innerHeight / window.innerWidth >= 0.72){ docEl.setAttribute('data-adapter', 'ipad'); } // PC端处理 if(!isMobile()){ wid = 800; if(docEl.hasAttribute('data-adapter')){ docEl.removeAttribute('data-adapter'); } } var rem = wid / 10; docEl.style.fontSize = rem + 'px'; // 因系统字体大小被设置调整(不是标准的)导致部分Android机型的根px不等于设置的px，进而rem产生误差的hack处理 var realitySize = parseFloat(win.getComputedStyle(docEl).fontSize); rem = rem * rem / realitySize; docEl.style.fontSize = rem + 'px'; lib.rem = rem; } // 初始化视口参数 lib.dpr = dpr; docEl.setAttribute('data-dpr', dpr); lib.refreshRem = refreshRem; refreshRem(); win.addEventListener('resize', function(){ clearTimeout(tid); tid = setTimeout(refreshRem, 240); }, false); win.addEventListener('pageshow', function(e){ // 浏览器前进后退的时候重新计算 if(e.persisted || (win.performance && win.performance.navigation.type === 2)){ clearTimeout(tid); tid = setTimeout(refreshRem, 240); } }, false); lib.rem2px = function(d){ var val = parseFloat(d) * this.rem; if(typeof d === 'string' && d.match(/rem$/)){ val += 'px'; } return val; } lib.px2rem = function(d){ var val = parseFloat(d) / this.rem; if(typeof d === 'string' && d.match(/px$/)){ val += 'rem'; } return val; } })(window, window['mFlexible'] || (window['mFlexible'] = {}));