下面的代码是拷贝自淘宝的手机app,当然,有的变量还原了,有的注释了。直接引用这个js,不需要设计viewport标签 !function(e){function t(){var t=o.getBoundingClientRect().width;t/i540(t=540*i),e.rem=t/
!function(e){function t(){var t=o.getBoundingClientRect().width;t/i>540&&(t=540*i),e.rem=t/16,o.style.fontSize=e.rem+"px"}var i,a,n,r=e.document,o=r.documentElement,l=r.querySelector('meta[name="viewport"]'),m=r.querySelector('meta[name="flexible"]');if(l){(s=l.getAttribute("content").match(/initial\-scale=(["']?)([\d\.]+)\1?/))&&(a=parseFloat(s[2]),i=parseInt(1/a))}else if(m){var s=m.getAttribute("content").match(/initial\-dpr=(["']?)([\d\.]+)\1?/);s&&(i=parseFloat(s[2]),a=parseFloat((1/i).toFixed(2)))}if(!i&&!a){var d=(e.navigator.appVersion.match(/android/gi),e.navigator.appVersion.match(/iphone/gi));i=e.devicePixelRatio,a=1/(i=d?i>=3?3:i>=2?2:1:1)}if(o.setAttribute("data-dpr",i),!l)if((l=r.createElement("meta")).setAttribute("name","viewport"),l.setAttribute("content","initial-scale="+a+", maximum-scale="+a+", minimum-scale="+a+", user-scalable=no"),o.firstElementChild)o.firstElementChild.appendChild(l);else{var c=r.createElement("div");c.appendChild(l),r.write(c.innerHTML)}e.dpr=i,e.addEventListener("resize",function(){clearTimeout(n),n=setTimeout(t,300)},!1),e.addEventListener("pageshow",function(e){e.persisted&&(clearTimeout(n),n=setTimeout(t,300))},!1),t()}(window);Sass相对变量
/*手机端尺寸自适应尺寸文件,以640宽度,40px作为最小大小,1px=1/40rem*/ $_1:.025rem; $_2:.05rem; $_3:.075rem; $_4:.1rem; $_5:.125rem; $_6:.15rem; $_7:.175rem; $_8:.2rem; $_9:.225rem; $_10:.25rem; $_11:.275rem; $_12:.3rem; $_13:.325rem; $_14:.35rem; $_15:.375rem; $_16:.4rem; $_17:.425rem; $_18:.45rem; $_19:.475rem; $_20:.5rem; $_21:.525rem; $_22:.55rem; $_23:.575rem; $_24:.6rem; $_25:.625rem; $_26:.65rem; $_27:.675rem; $_28:.7rem; $_29:.725rem; $_30:.75rem; $_31:.775rem; $_32:.8rem; $_33:.825rem; $_34:.85rem; $_35:.875rem; $_36:.9rem; $_37:.925rem; $_38:.95rem; $_39:.975rem; $_40:1rem; $_41:1.025rem; $_42:1.05rem; $_43:1.075rem; $_44:1.1rem; $_45:1.125rem; $_46:1.15rem; $_47:1.175rem; $_48:1.2rem; $_49:1.225rem; $_50:1.25rem; $_51:1.275rem; $_52:1.3rem; $_53:1.325rem; $_54:1.35rem; $_55:1.375rem; $_56:1.4rem; $_57:1.425rem; $_58:1.45rem; $_59:1.475rem; $_60:1.5rem; $_61:1.525rem; $_62:1.55rem; $_63:1.575rem; $_64:1.6rem; $_65:1.625rem; $_66:1.65rem; $_67:1.675rem; $_68:1.7rem; $_69:1.725rem; $_70:1.75rem; $_71:1.775rem; $_72:1.8rem; $_73:1.825rem; $_74:1.85rem; $_75:1.875rem; $_76:1.9rem; $_77:1.925rem; $_78:1.95rem; $_79:1.975rem; $_80:2rem; $_81:2.025rem; $_82:2.05rem; $_83:2.075rem; $_84:2.1rem; $_85:2.125rem; $_86:2.15rem; $_87:2.175rem; $_88:2.2rem; $_89:2.225rem; $_90:2.25rem; $_91:2.275rem; $_92:2.3rem; $_93:2.325rem; $_94:2.35rem; $_95:2.375rem; $_96:2.4rem; $_97:2.425rem; $_98:2.45rem; $_99:2.475rem; $_100:2.5rem; $_101:2.525rem; $_102:2.55rem; $_103:2.575rem; $_104:2.6rem; $_105:2.625rem; $_106:2.65rem; $_107:2.675rem; $_108:2.7rem; $_109:2.725rem; $_110:2.75rem; $_111:2.775rem; $_112:2.8rem; $_113:2.825rem; $_114:2.85rem; $_115:2.875rem; $_116:2.9rem; $_117:2.925rem; $_118:2.95rem; $_119:2.975rem; $_120:3rem; $_121:3.025rem; $_122:3.05rem; $_123:3.075rem; $_124:3.1rem; $_125:3.125rem; $_126:3.15rem; $_127:3.175rem; $_128:3.2rem; $_129:3.225rem; $_130:3.25rem; $_131:3.275rem; $_132:3.3rem; $_133:3.325rem; $_134:3.35rem; $_135:3.375rem; $_136:3.4rem; $_137:3.425rem; $_138:3.45rem; $_139:3.475rem; $_140:3.5rem; $_141:3.525rem; $_142:3.55rem; $_143:3.575rem; $_144:3.6rem; $_145:3.625rem; $_146:3.65rem; $_147:3.675rem; $_148:3.7rem; $_149:3.725rem; $_150:3.75rem; $_151:3.775rem; $_152:3.8rem; $_153:3.825rem; $_154:3.85rem; $_155:3.875rem; $_156:3.9rem; $_157:3.925rem; $_158:3.95rem; $_159:3.975rem; $_160:4rem; $_161:4.025rem; $_162:4.05rem; $_163:4.075rem; $_164:4.1rem; $_165:4.125rem; $_166:4.15rem; $_167:4.175rem; $_168:4.2rem; $_169:4.225rem; $_170:4.25rem; $_171:4.275rem; $_172:4.3rem; $_173:4.325rem; $_174:4.35rem; $_175:4.375rem; $_176:4.4rem; $_177:4.425rem; $_178:4.45rem; $_179:4.475rem; $_180:4.5rem; $_181:4.525rem; $_182:4.55rem; $_183:4.575rem; $_184:4.6rem; $_185:4.625rem; $_186:4.65rem; $_187:4.675rem; $_188:4.7rem; $_189:4.725rem; $_190:4.75rem; $_191:4.775rem; $_192:4.8rem; $_193:4.825rem; $_194:4.85rem; $_195:4.875rem; $_196:4.9rem; $_197:4.925rem; $_198:4.95rem; $_199:4.975rem; $_200:5rem; $_201:5.025rem; $_202:5.05rem; $_203:5.075rem; $_204:5.1rem; $_205:5.125rem; $_206:5.15rem; $_207:5.175rem; $_208:5.2rem; $_209:5.225rem; $_210:5.25rem; $_211:5.275rem; $_212:5.3rem; $_213:5.325rem; $_214:5.35rem; $_215:5.375rem; $_216:5.4rem; $_217:5.425rem; $_218:5.45rem; $_219:5.475rem; $_220:5.5rem; $_221:5.525rem; $_222:5.55rem; $_223:5.575rem; $_224:5.6rem; $_225:5.625rem; $_226:5.65rem; $_227:5.675rem; $_228:5.7rem; $_229:5.725rem; $_230:5.75rem; $_231:5.775rem; $_232:5.8rem; $_233:5.825rem; $_234:5.85rem; $_235:5.875rem; $_236:5.9rem; $_237:5.925rem; $_238:5.95rem; $_239:5.975rem; $_240:6rem; $_241:6.025rem; $_242:6.05rem; $_243:6.075rem; $_244:6.1rem; $_245:6.125rem; $_246:6.15rem; $_247:6.175rem; $_248:6.2rem; $_249:6.225rem; $_250:6.25rem; $_251:6.275rem; $_252:6.3rem; $_253:6.325rem; $_254:6.35rem; $_255:6.375rem; $_256:6.4rem; $_257:6.425rem; $_258:6.45rem; $_259:6.475rem; $_260:6.5rem; $_261:6.525rem; $_262:6.55rem; $_263:6.575rem; $_264:6.6rem; $_265:6.625rem; $_266:6.65rem; $_267:6.675rem; $_268:6.7rem; $_269:6.725rem; $_270:6.75rem; $_271:6.775rem; $_272:6.8rem; $_273:6.825rem; $_274:6.85rem; $_275:6.875rem; $_276:6.9rem; $_277:6.925rem; $_278:6.95rem; $_279:6.975rem; $_280:7rem; $_281:7.025rem; $_282:7.05rem; $_283:7.075rem; $_284:7.1rem; $_285:7.125rem; $_286:7.15rem; $_287:7.175rem; $_288:7.2rem; $_289:7.225rem; $_290:7.25rem; $_291:7.275rem; $_292:7.3rem; $_293:7.325rem; $_294:7.35rem; $_295:7.375rem; $_296:7.4rem; $_297:7.425rem; $_298:7.45rem; $_299:7.475rem; $_300:7.5rem; $_301:7.525rem; $_302:7.55rem; $_303:7.575rem; $_304:7.6rem; $_305:7.625rem; $_306:7.65rem; $_307:7.675rem; $_308:7.7rem; $_309:7.725rem; $_310:7.75rem; $_311:7.775rem; $_312:7.8rem; $_313:7.825rem; $_314:7.85rem; $_315:7.875rem; $_316:7.9rem; $_317:7.925rem; $_318:7.95rem; $_319:7.975rem; $_320:8rem; $_321:8.025rem; $_322:8.05rem; $_323:8.075rem; $_324:8.1rem; $_325:8.125rem; $_326:8.15rem; $_327:8.175rem; $_328:8.2rem; $_329:8.225rem; $_330:8.25rem; $_331:8.275rem; $_332:8.3rem; $_333:8.325rem; $_334:8.35rem; $_335:8.375rem; $_336:8.4rem; $_337:8.425rem; $_338:8.45rem; $_339:8.475rem; $_340:8.5rem; $_341:8.525rem; $_342:8.55rem; $_343:8.575rem; $_344:8.6rem; $_345:8.625rem; $_346:8.65rem; $_347:8.675rem; $_348:8.7rem; $_349:8.725rem; $_350:8.75rem; $_351:8.775rem; $_352:8.8rem; $_353:8.825rem; $_354:8.85rem; $_355:8.875rem; $_356:8.9rem; $_357:8.925rem; $_358:8.95rem; $_359:8.975rem; $_360:9rem; $_361:9.025rem; $_362:9.05rem; $_363:9.075rem; $_364:9.1rem; $_365:9.125rem; $_366:9.15rem; $_367:9.175rem; $_368:9.2rem; $_369:9.225rem; $_370:9.25rem; $_371:9.275rem; $_372:9.3rem; $_373:9.325rem; $_374:9.35rem; $_375:9.375rem; $_376:9.4rem; $_377:9.425rem; $_378:9.45rem; $_379:9.475rem; $_380:9.5rem; $_381:9.525rem; $_382:9.55rem; $_383:9.575rem; $_384:9.6rem; $_385:9.625rem; $_386:9.65rem; $_387:9.675rem; $_388:9.7rem; $_389:9.725rem; $_390:9.75rem; $_391:9.775rem; $_392:9.8rem; $_393:9.825rem; $_394:9.85rem; $_395:9.875rem; $_396:9.9rem; $_397:9.925rem; $_398:9.95rem; $_399:9.975rem; $_400:10rem;Less相对变量
/*手机端尺寸自适应尺寸文件,以640宽度,40px作为最小大小,1px=1/40rem*/ @_1:.025rem; @_2:.05rem; @_3:.075rem; @_4:.1rem; @_5:.125rem; @_6:.15rem; @_7:.175rem; @_8:.2rem; @_9:.225rem; @_10:.25rem; @_11:.275rem; @_12:.3rem; @_13:.325rem; @_14:.35rem; @_15:.375rem; @_16:.4rem; @_17:.425rem; @_18:.45rem; @_19:.475rem; @_20:.5rem; @_21:.525rem; @_22:.55rem; @_23:.575rem; @_24:.6rem; @_25:.625rem; @_26:.65rem; @_27:.675rem; @_28:.7rem; @_29:.725rem; @_30:.75rem; @_31:.775rem; @_32:.8rem; @_33:.825rem; @_34:.85rem; @_35:.875rem; @_36:.9rem; @_37:.925rem; @_38:.95rem; @_39:.975rem; @_40:1rem; @_41:1.025rem; @_42:1.05rem; @_43:1.075rem; @_44:1.1rem; @_45:1.125rem; @_46:1.15rem; @_47:1.175rem; @_48:1.2rem; @_49:1.225rem; @_50:1.25rem; @_51:1.275rem; @_52:1.3rem; @_53:1.325rem; @_54:1.35rem; @_55:1.375rem; @_56:1.4rem; @_57:1.425rem; @_58:1.45rem; @_59:1.475rem; @_60:1.5rem; @_61:1.525rem; @_62:1.55rem; @_63:1.575rem; @_64:1.6rem; @_65:1.625rem; @_66:1.65rem; @_67:1.675rem; @_68:1.7rem; @_69:1.725rem; @_70:1.75rem; @_71:1.775rem; @_72:1.8rem; @_73:1.825rem; @_74:1.85rem; @_75:1.875rem; @_76:1.9rem; @_77:1.925rem; @_78:1.95rem; @_79:1.975rem; @_80:2rem; @_81:2.025rem; @_82:2.05rem; @_83:2.075rem; @_84:2.1rem; @_85:2.125rem; @_86:2.15rem; @_87:2.175rem; @_88:2.2rem; @_89:2.225rem; @_90:2.25rem; @_91:2.275rem; @_92:2.3rem; @_93:2.325rem; @_94:2.35rem; @_95:2.375rem; @_96:2.4rem; @_97:2.425rem; @_98:2.45rem; @_99:2.475rem; @_100:2.5rem; @_101:2.525rem; @_102:2.55rem; @_103:2.575rem; @_104:2.6rem; @_105:2.625rem; @_106:2.65rem; @_107:2.675rem; @_108:2.7rem; @_109:2.725rem; @_110:2.75rem; @_111:2.775rem; @_112:2.8rem; @_113:2.825rem; @_114:2.85rem; @_115:2.875rem; @_116:2.9rem; @_117:2.925rem; @_118:2.95rem; @_119:2.975rem; @_120:3rem; @_121:3.025rem; @_122:3.05rem; @_123:3.075rem; @_124:3.1rem; @_125:3.125rem; @_126:3.15rem; @_127:3.175rem; @_128:3.2rem; @_129:3.225rem; @_130:3.25rem; @_131:3.275rem; @_132:3.3rem; @_133:3.325rem; @_134:3.35rem; @_135:3.375rem; @_136:3.4rem; @_137:3.425rem; @_138:3.45rem; @_139:3.475rem; @_140:3.5rem; @_141:3.525rem; @_142:3.55rem; @_143:3.575rem; @_144:3.6rem; @_145:3.625rem; @_146:3.65rem; @_147:3.675rem; @_148:3.7rem; @_149:3.725rem; @_150:3.75rem; @_151:3.775rem; @_152:3.8rem; @_153:3.825rem; @_154:3.85rem; @_155:3.875rem; @_156:3.9rem; @_157:3.925rem; @_158:3.95rem; @_159:3.975rem; @_160:4rem; @_161:4.025rem; @_162:4.05rem; @_163:4.075rem; @_164:4.1rem; @_165:4.125rem; @_166:4.15rem; @_167:4.175rem; @_168:4.2rem; @_169:4.225rem; @_170:4.25rem; @_171:4.275rem; @_172:4.3rem; @_173:4.325rem; @_174:4.35rem; @_175:4.375rem; @_176:4.4rem; @_177:4.425rem; @_178:4.45rem; @_179:4.475rem; @_180:4.5rem; @_181:4.525rem; @_182:4.55rem; @_183:4.575rem; @_184:4.6rem; @_185:4.625rem; @_186:4.65rem; @_187:4.675rem; @_188:4.7rem; @_189:4.725rem; @_190:4.75rem; @_191:4.775rem; @_192:4.8rem; @_193:4.825rem; @_194:4.85rem; @_195:4.875rem; @_196:4.9rem; @_197:4.925rem; @_198:4.95rem; @_199:4.975rem; @_200:5rem; @_201:5.025rem; @_202:5.05rem; @_203:5.075rem; @_204:5.1rem; @_205:5.125rem; @_206:5.15rem; @_207:5.175rem; @_208:5.2rem; @_209:5.225rem; @_210:5.25rem; @_211:5.275rem; @_212:5.3rem; @_213:5.325rem; @_214:5.35rem; @_215:5.375rem; @_216:5.4rem; @_217:5.425rem; @_218:5.45rem; @_219:5.475rem; @_220:5.5rem; @_221:5.525rem; @_222:5.55rem; @_223:5.575rem; @_224:5.6rem; @_225:5.625rem; @_226:5.65rem; @_227:5.675rem; @_228:5.7rem; @_229:5.725rem; @_230:5.75rem; @_231:5.775rem; @_232:5.8rem; @_233:5.825rem; @_234:5.85rem; @_235:5.875rem; @_236:5.9rem; @_237:5.925rem; @_238:5.95rem; @_239:5.975rem; @_240:6rem; @_241:6.025rem; @_242:6.05rem; @_243:6.075rem; @_244:6.1rem; @_245:6.125rem; @_246:6.15rem; @_247:6.175rem; @_248:6.2rem; @_249:6.225rem; @_250:6.25rem; @_251:6.275rem; @_252:6.3rem; @_253:6.325rem; @_254:6.35rem; @_255:6.375rem; @_256:6.4rem; @_257:6.425rem; @_258:6.45rem; @_259:6.475rem; @_260:6.5rem; @_261:6.525rem; @_262:6.55rem; @_263:6.575rem; @_264:6.6rem; @_265:6.625rem; @_266:6.65rem; @_267:6.675rem; @_268:6.7rem; @_269:6.725rem; @_270:6.75rem; @_271:6.775rem; @_272:6.8rem; @_273:6.825rem; @_274:6.85rem; @_275:6.875rem; @_276:6.9rem; @_277:6.925rem; @_278:6.95rem; @_279:6.975rem; @_280:7rem; @_281:7.025rem; @_282:7.05rem; @_283:7.075rem; @_284:7.1rem; @_285:7.125rem; @_286:7.15rem; @_287:7.175rem; @_288:7.2rem; @_289:7.225rem; @_290:7.25rem; @_291:7.275rem; @_292:7.3rem; @_293:7.325rem; @_294:7.35rem; @_295:7.375rem; @_296:7.4rem; @_297:7.425rem; @_298:7.45rem; @_299:7.475rem; @_300:7.5rem; @_301:7.525rem; @_302:7.55rem; @_303:7.575rem; @_304:7.6rem; @_305:7.625rem; @_306:7.65rem; @_307:7.675rem; @_308:7.7rem; @_309:7.725rem; @_310:7.75rem; @_311:7.775rem; @_312:7.8rem; @_313:7.825rem; @_314:7.85rem; @_315:7.875rem; @_316:7.9rem; @_317:7.925rem; @_318:7.95rem; @_319:7.975rem; @_320:8rem; @_321:8.025rem; @_322:8.05rem; @_323:8.075rem; @_324:8.1rem; @_325:8.125rem; @_326:8.15rem; @_327:8.175rem; @_328:8.2rem; @_329:8.225rem; @_330:8.25rem; @_331:8.275rem; @_332:8.3rem; @_333:8.325rem; @_334:8.35rem; @_335:8.375rem; @_336:8.4rem; @_337:8.425rem; @_338:8.45rem; @_339:8.475rem; @_340:8.5rem; @_341:8.525rem; @_342:8.55rem; @_343:8.575rem; @_344:8.6rem; @_345:8.625rem; @_346:8.65rem; @_347:8.675rem; @_348:8.7rem; @_349:8.725rem; @_350:8.75rem; @_351:8.775rem; @_352:8.8rem; @_353:8.825rem; @_354:8.85rem; @_355:8.875rem; @_356:8.9rem; @_357:8.925rem; @_358:8.95rem; @_359:8.975rem; @_360:9rem; @_361:9.025rem; @_362:9.05rem; @_363:9.075rem; @_364:9.1rem; @_365:9.125rem; @_366:9.15rem; @_367:9.175rem; @_368:9.2rem; @_369:9.225rem; @_370:9.25rem; @_371:9.275rem; @_372:9.3rem; @_373:9.325rem; @_374:9.35rem; @_375:9.375rem; @_376:9.4rem; @_377:9.425rem; @_378:9.45rem; @_379:9.475rem; @_380:9.5rem; @_381:9.525rem; @_382:9.55rem; @_383:9.575rem; @_384:9.6rem; @_385:9.625rem; @_386:9.65rem; @_387:9.675rem; @_388:9.7rem; @_389:9.725rem; @_390:9.75rem; @_391:9.775rem; @_392:9.8rem; @_393:9.825rem; @_394:9.85rem; @_395:9.875rem; @_396:9.9rem; @_397:9.925rem; @_398:9.95rem; @_399:9.975rem; @_400:10rem;未压缩
!function(win) { function resize() { var domWidth = domEle.getBoundingClientRect().width; if(domWidth / v > 540){ domWidth = 540 * v; } win.rem = domWidth / 16; domEle.style.fontSize = win.rem + "px"; } var v, initial_scale, timeCode, dom = win.document, domEle = dom.documentElement, viewport = dom.querySelector('meta[name="viewport"]'), flexible = dom.querySelector('meta[name="flexible"]'); if (viewport) { var o = viewport.getAttribute("content").match(/initial\-scale=(["']?)([\d\.]+)\1?/); if(o){ initial_scale = parseFloat(o[2]); v = parseInt(1 / initial_scale); } } else if(flexible) { var o = flexible.getAttribute("content").match(/initial\-dpr=(["']?)([\d\.]+)\1?/); if (o) { v = parseFloat(o[2]); initial_scale = parseFloat((1 / v).toFixed(2)) } } if (!v && !initial_scale) { var n = (win.navigator.appVersion.match(/android/gi), win.navigator.appVersion.match(/iphone/gi)); v = win.devicePixelRatio; v = n ? v >= 3 ? 3 : v >= 2 ? 2 : 1 : 1, initial_scale = 1 / v } //没有viewport标签的情况下 if (domEle.setAttribute("data-dpr", v), !viewport) { if (viewport = dom.createElement("meta"), viewport.setAttribute("name", "viewport"), viewport.setAttribute("content", "initial-scale=" + initial_scale + ", maximum-scale=" + initial_scale + ", minimum-scale=" + initial_scale + ", user-scalable=no"), domEle.firstElementChild) { domEle.firstElementChild.appendChild(viewport) } else { var m = dom.createElement("div"); m.appendChild(viewport), dom.write(m.innerHTML) } } win.dpr = v; win.addEventListener("resize", function() { clearTimeout(timeCode), timeCode = setTimeout(resize, 300) }, false); win.addEventListener("pageshow", function(b) { b.persisted && (clearTimeout(timeCode), timeCode = setTimeout(resize, 300)) }, false); resize(); }(window);