システムフォントの移動端の修正により、remレイアウトの乱れが生じる解決方法

モバイル端末のページがremでアダプティブレイアウトをしていると、システムのフォントを修正してレイアウトが乱れる場合があります.システムフォントの修正は全体的なものですので、webviewも影響を受ける可能性があります.
解決策はremを設定した後、実際のフォントの値を取って、私達が予め設定したremの値と比較して、その上でもう一度「拡大縮小」をします.

var num = 20;
var docEl = document.documentElement;
var width = docEl.getBoundingClientRect().width;
var rem = width / num;
rem = parseFloat(rem.toFixed(3));
docEl.style.fontSize = rem + 'px';

var realitySize = parseFloat(window.getComputedStyle(document.documentElement).fontSize);
if (rem !== realitySize) {
  rem = rem * rem / realitySize;
  docEl.style.fontSize = rem + 'px';
}

window.REM = rem;