Chrome移动端部分段落字体自动缩小，如何禁用该效果？

注：仅在手机Chrome浏览器、系统文本大小设为L、XL或XXL时出现此问题，Opera及Mi浏览器无异常。

相关代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">       
    <style>
        p {
           font-size: 16px;
        }
    </style>
</head>
<body>
   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione eligendi optio sapiente cumque quidem ad nihil repellat, qui illum suscipit necessitatibus, officiis illo. Molestias voluptas libero ratione qui, ut quibusdam!</p>
   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione eligendi optio sapiente cumque quidem ad nihil repellat, qui illum suscipit necessitatibus, officiis illo. Molestias voluptas libero ratione qui, ut quibusdam!<button>Read more></button></p>
</body>
</html>

问题效果截图 #

原因分析 #

这是Chrome移动端的字体自动调整机制导致的：当段落标签<p>内部包含按钮这类行内交互元素时，Chrome会判定这段内容属于紧凑布局场景，在系统文本尺寸放大（L/XL/XXL）的情况下，自动缩小该段落的字体，以此避免布局出现溢出或错乱。

解决方法 #

方法一：强制关闭字体自动调整 #

给段落添加text-size-adjust样式（包含webkit私有前缀，兼容Chrome移动端），强制禁用浏览器的字体自动调整行为：

p {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

方法二：调整DOM结构 #

将按钮移出段落标签，让段落与按钮成为同级元素，从结构上避免Chrome触发紧凑布局的字体调整逻辑：

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione eligendi optio sapiente cumque quidem ad nihil repellat, qui illum suscipit necessitatibus, officiis illo. Molestias voluptas libero ratione qui, ut quibusdam!</p>
<button>Read more></button>

内容的提问来源于stack exchange，提问作者ViH