同字号<a>元素DevTools显示一致，真机显示大小不同求助

我有两个菜单区块：一个位于<main>标签内，另一个在<footer>标签中且处于第一个区块正下方。两者设置了完全相同的CSS字号（例如1rem），在DevTools响应式视图中检查时字号完全一致，但在真机打开网站时，footer区块的字体比上方区块更小。

viewport设置代码：

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

真机显示效果：

我尝试了PX、REM、EM三种单位，均出现该问题。调整的CSS规则如下，且未被其他样式覆盖：

#bottommenublock a {
    font-size: 1em!important;
}

.flist a {
    font-size: 1em!important;
}

若将footer区块设为1rem、上方区块设为0.9rem，真机上两者显示一致，但DevTools中又出现差异，十分费解！

更新2 #

提供可复现该问题的完整HTML页面（保留了可能影响问题的CSS）

更新3 #

推测问题出在我的手机上，让伴侣用iPhone 13访问同一页面，显示完全正常。

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