移动端适配代码收藏

rem布局

<script defer="defer" language="Javascript">var adaptive={};(function(e,g){var h=e.document;var b=h.documentElement;var j=e.devicePixelRatio;var i=1;var c=1;function k(){var m=/iphone/gi.test(e.navigator.appVersion);if(g.scaleType===2&&m||g.scaleType===3){i=j}e.devicePixelRatioValue=i;c=1/i;var p=h.querySelector('meta[name="viewport"]');var o="initial-scale="+c+", maximum-scale="+c+", minimum-scale="+c+", user-scalable=no";if(i===1){o="width=device-width, ".concat(o)}if(!m&&i!==1){o=o.concat(", target-densitydpi=device-dpi")}if(p){p.setAttribute("content",o)}else{var n=h.createElement("meta");n.setAttribute("name","viewport");n.setAttribute("content",o);if(b.firstElementChild){b.firstElementChild.appendChild(n)}else{var q=h.createElement("div");q.appendChild(n);b.appendChild(q)}}}var f=100;g.errDpr=1;function a(){var m;if(g.maxWidth){m=Math.min(b.getBoundingClientRect().width,g.maxWidth*i)}else{m=b.getBoundingClientRect().width}f=100*m/g.desinWidth*(g.errDpr||1);b.style.fontSize=f+"px";h.body&&(h.body.style.fontSize=g.baseFont/100+"rem");g.setRemCallback&&g.setRemCallback();g.newBase=f}var d;g.desinWidth=750;g.baseFont=28;g.reflow=function(){b.clientWidth};function l(){if(/android/ig.test(window.navigator.appVersion)){var o=document.createElement("p");o.style.height="1px";o.style.width="2.5rem";o.style.visibility="hidden";document.body.appendChild(o);var m=o.offsetWidth;var n=window.adaptive.newBase*2.5;if(Math.abs(n/m-1)>0.05){g.errDpr=n/m;a()}document.body.removeChild(o)}}g.init=function(){e.addEventListener("resize",function(){clearTimeout(d);d=setTimeout(a,300)},false);e.addEventListener("pageshow",function(m){if(m.persisted){clearTimeout(d);d=setTimeout(a,300)}},false);if(h.readyState==="complete"){h.body.style.fontSize=g.baseFont/100+"rem";l()}else{h.addEventListener("DOMContentLoaded",function(m){h.body.style.fontSize=g.baseFont/100+"rem";l()},false)}k();a();b.setAttribute("data-dpr",i)};g.remToPx=function(m){return m*f}})(window,adaptive);if(typeof module!="undefined"&&module.exports){module.exports=adaptive}else{if(typeof define=="function"&&define.amd){define(function(){return adaptive})}else{window.adaptive=adaptive}};window['adaptive'].desinWidth = 750;window['adaptive'].baseFont = 16;window['adaptive'].maxWidth = 580;window['adaptive'].scaleType = 1;window['adaptive'].init();</script>

可以自适应手机屏幕在body加上合适的font-size；
直接放在head中可用；

移动端用到的一些meta

<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes">
<meta name="flexible" content="initial-dpr=2">