<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>rem</title> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/> <script type="text/javascript"> function resizeEvt(){ var ww = document.documentElement.clientWidth, drp = window.devicePixelRatio; //document.documentElement.style.fontSize = ww*drp/10+'px';iphone出问题。 document.documentElement.style.fontSize = ww/10+'px'; } document.addEventListener('DOMContentLoaded',resizeEvt,false); window.addEventListener('resize',resizeEvt,false); </script> <style type="text/css"> *{ margin: 0; padding: 0; } p{ width:10rem; height:100%; font-size:.5rem; } </style> </head> <body> <p> 无忧工作网版权所有无忧工作网版权所有无忧工作网版权所有无忧 </p> </body> </html>
现在测试是不需要window.devicePixelRatio的
至少拿同事的iphone测试之后是不需要的。
原理：
把一个手机屏幕分成10份。每一份就是1/10的屏幕宽度。避免了设置
html{ font-size:62.5%; }
在chrome浏览器下，只能定义12px以上的字体。低于12px都是按照12px的来计算的。
第二种方案(可行性方案，已在项目中实践)：
(function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; docEl.style.fontSize = Math.round( 100* (clientWidth / 750)) + 'px'; }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window);
注意：移动端字体一般不会低于14px;还有就是页面内部的滚动条需要添加css属性，保证流畅度：
-webkit-overflow-scrolling: touch;