Mac下Chrome手机模拟器里网页字号bug

遇到一个很诡异的bug，前提条件：Mac下Chrome手机模拟器。当网页设置viewport缩放为0.5（测试超过0.8就正常）时候，如果网页里文字过多，字号不对。下面是测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=0.5">
    <title>Document</title>
<style>
*{
    margin: 0;
    padding:0;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    -webkit-text-size-adjust:none;
}
body{
    font-size: 24px;
}
p{
    word-wrap:break-word;
}
</style>
</head>
<body>

<p>abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</p>
<p>
    <button style="font-size:30px;">click me(点击，全部字号相同，但文字过多，字号会变大)</button>
</p>
<p id="p" style="display:none">abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</p>

<script>
document.querySelector('button').onclick = function(){
    document.querySelector('#p').style.display = 'block';
}
</script>
</body>
</html>

点击按钮后，下面的p标签里字号比上面p要大，但body里设置的是24px。初步怀疑是Mac版本Chrome的bug，无意中发现临时解决方案，就是给p加任意高度即可。<p id="p" style="display:none;height:100px">

求更好的解决方案，谢谢诶

这是因为 Font Boosting 的问题。
可以参考一下这篇文章 https://github.com/amfe/article/issues/10

Chrome 沒有正確應用最小字號的緣故

一直都不太好用

【热门文章】