极客观点
项目管理
HarmonyOS
问题出现
首先， 适配方案， 根据 dpr 来缩放页面， 使得物理像素和 css 像素是一样的；；
通过代码在 iphone6/7/8 中 dpr=2, html 的font-size: 100px;
按照逻辑 1rem = 100px; 0.24rem = 24rem;
这个时候查看结果为
计算出来的 字体大小不是设置的 0.24rem 要转换的 24px
通过自己各种实验发现：
删除掉body中的任何一个 div, 使 div 的个数少于 63 个， 显示就是正常的(仅限下面提供的代码)
如图， 这个应该是正常的结果：
疑问不知道为什么会出现这种问题？？
- 同样的代码， 为什么会出现不同个数的 dom 元素， 渲染结果不一样？？
- 怎么样的适配， 可以解决这个问题？？
测试代码
<!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>
html5
chrome
font-boosting 了解一下