移动端桌面模式下不同浏览器footer元素字体大小异常求助

问题背景 #

已为页脚的<p>和<h4>元素设置固定font-size: 1.6rem，但在移动端桌面模式下，Chrome显示字体异常偏大，Firefox和Safari显示符合预期。将字号缩小至1.0rem时Chrome显示正常，但Safari显示效果不佳。已正确添加<meta name="viewport" content="width=device-width, initial-scale=1.0" />标签。

相关HTML结构：

<div class="container-item details">
     <h2>travelaja</h2>
      <p class="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus magna fringilla urna, porttitor rhoncus dolor purus non enim praesent elementum facilisisleo, vel.
      </p>
</div>

<div class="container-item contact">
   <h3>Contact</h3>
   <h4>Address: Jl.Codelaras No.205A Kediri, Pare AG17</h4>
   ...
</div>

当前CSS设置：

footer .container .container-item p.content {
  font-size: 1.6rem;
}

footer .container .contact h4 {
  margin-bottom: 15px;
  font-weight: 400;
  font-size: 1.6rem;
}

解决方案 #

1. 禁用浏览器自动文本缩放 #

Chrome在移动端桌面模式下会强制放大部分文本，可通过text-size-adjust属性阻止该行为，确保字体按设置值显示：

footer .container .container-item p.content,
footer .container .contact h4 {
  font-size: 1.6rem;
  -webkit-text-size-adjust: 100%; /* 适配Chrome、Safari */
  text-size-adjust: 100%; /* 标准CSS属性 */
}

2. 显式设置根元素基准字号 #

rem基于根元素(<html>)的字体大小计算，不同浏览器默认根字号可能存在差异，显式设置可确保rem计算一致：

html {
  font-size: 16px; /* 固定基准字号，1.6rem将对应25.6px */
}

3. 排查Chrome默认样式干扰 #

通过浏览器开发者工具（F12）检查目标元素的计算样式，确认是否存在Chrome用户代理样式（如对<h4>的默认字号、缩放规则）导致的干扰，如有则针对性覆盖。

验证步骤 #

1. 应用上述CSS修改后，在Chrome移动端桌面模式下测试字体显示效果
2. 同步检查Firefox和Safari的显示，确保无负面影响
3. 若仍有差异，微调font-size值（如1.5rem）找到各浏览器的平衡点

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