在 dektop 模式下，针对不同移动设备和不同浏览器的不同 html 元素的字体

问：

我已经为页脚中的“p”和“h4”元素设置了固定的字体大小，但是在手机上使用桌面模式时，我总是遇到不同的字体大小。我在使用 firefox 和 safari 时得到了预期的结果，但在使用 chrome 时得到了一个奇怪的结果。

这里是参考网站，链接到该网站。

下面附上的图像可以直观地说明该问题。

这是 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.0rem，但它在 Safari 上看起来不太好，然后在 chrome 中很正常。

我还确保我有这个元标签，

<meta name="viewport" content="width=device-width, initial-scale=1.0" />