關鍵是
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no"> </head> <style type="text/css"> html{font-size:100px;} body{font-size:0.14rem/*实际相当于14px*/} @media(min-device-width:375px)and(max-device-width:667px)and(-webkit-min-device-pixel-ratio:2){ html{font-size:117.1875px;} } /*iphone6plus*/ @media(min-device-width:414px)and(max-device-width:736px)and(-webkit-min-device-pixel-ratio:3){ html{font-size:129.375px;} } </style> <script type="text/javascript"> (function(doc,win){ var docEl=doc.documentElement, resizeEvt="onorientationchange" in window ? "orientationchange" : "resize", recalc=function(){ console.log(resizeEvt); var clientWidth=docEl.clientWidth; if(!clientWidth)return; docEl.style.fontSize=100*(clientWidth/320)+'px'; }; //AbortifbrowserdoesnotsupportaddEventListener if(!doc.addEventListener)return; win.addEventListener(resizeEvt,recalc,false); doc.addEventListener('DOMContentLoaded',recalc,false); })(document,window); </script> <body> hello </body> </html>