0

问题出现

首先, 适配方案, 根据 dpr 来缩放页面, 使得物理像素和 css 像素是一样的;

通过代码在 iphone6/7/8 中 dpr=2, html 的font-size: 100px;

按照逻辑 1rem = 100px; 0.24rem = 24rem;

这个时候查看结果为
clipboard.png

计算出来的 字体大小不是设置的 0.24rem 要转换的 24px

通过自己各种实验发现:

删除掉body中的任何一个 div, 使 div 的个数少于 63 个, 显示就是正常的(仅限下面提供的代码)

如图, 这个应该是正常的结果:
clipboard.png

疑问不知道为什么会出现这种问题??

  1. 同样的代码, 为什么会出现不同个数的 dom 元素, 渲染结果不一样??
  2. 怎么样的适配, 可以解决这个问题??

测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        const win = window;
        let webRem =  (win.flex = (baseFontSize, fontscale) => {
          const _baseFontSize = baseFontSize || 100;
          const _fontscale = fontscale || 1;
          const doc = win.document;
          const ua = navigator.userAgent;
          const matches = ua.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i);
          const UCversion = ua.match(/U3\/((\d+|\.){5,})/i);
          const isUCHd =
            UCversion && parseInt(UCversion[1].split('.').join(''), 10) >= 80;
          const isIos = navigator.appVersion.match(/(iphone|ipad|ipod)/gi);
          let dpr = win.devicePixelRatio || 1;
          if (!isIos && !(matches && matches[1] > 534) && !isUCHd) {
            dpr = 1;
          }
          const scale = 1 / dpr;
          let metaEl = doc.querySelector('meta[name="viewport"]');
          if (!metaEl) {
            metaEl = doc.createElement('meta');
            metaEl.setAttribute('name', 'viewport');
            doc.head.appendChild(metaEl);
          }
          metaEl.setAttribute(
            'content',
            `width=device-width,user-scalable=no,initial-scale=${scale},maximum-scale=${scale},minimum-scale=${scale}`
          );
          doc.documentElement.style.fontSize = `${(_baseFontSize / 2) *
            dpr *
            _fontscale}px`;
        });
        // console.log(webRem)
        webRem(100,1)
    </script>   
    <style type="text/css">
        html, body, div, span, h3, p, b {
           margin: 0;
            padding: 0;
            border: 0;
          
        }

        body {
            font-size: 0.24rem;
        }
    </style>
  
</head>
<body>
  <div>你好</div>
  <div>你好</div>
  <div>你好</div>
  <div>你好</div>
  <div>你好</div>
  <div>你好</div>
  <div>你好</div>
  <div>你好</div>
  <div>你好</div>
  <div>你好</div>
  <div>你好</div>
  <div>你好</div>
  <div>你好</div>
  <div>你好</div>
  <div>你好</div>
  <div>你好</div>
  <div>你好</div>
  <div>你好</div>
  <div>你好</div>
  <div>你好</div>
  <div>你好</div>
  <div>你好</div>
  <div>你好</div>
  <div>你好</div>
  <div>你好</div>
  <div>你好</div>
  <div>你好</div>
  <div>你好</div>
  <div>你好</div>
  <div>你好</div>
  <div>你好</div>
  <div>你好</div>
  <div>你好</div>
  <div>你好</div>
  <div>你好</div>
  <div>你好</div>
  <div>你好</div>
  <div>你好</div>
  <div>你好</div>
  <div>你好</div>
  <div>你好</div>
  <div>你好</div>
  <div>你好</div>
  <div>你好</div>
  <div>你好</div>
  <div>你好</div>
  <div>你好</div>
  <div>你好</div>
  <div>你好</div>
  <div>你好</div>
  <div>你好</div>
  <div>你好</div>
  <div>你好</div>
  <div>你好</div>
  <div>你好</div>
  <div>你好</div>
  <div>你好</div>
  <div>你好</div>
  <div>你好</div>
  <div>你好</div>
  <div>你好</div>
  <div>你好</div>
  <div>你好</div>
</body>
</html>
dt009 1
2019-06-14 提问
2 个回答
0

font-boosting 了解一下

body *{
 font-size: 0.24rem;
 max-height:100%
}
0

已经解决,
text-size-adjust 属性,
https://developer.mozilla.org...

撰写答案

推广链接