移动端网页文本显示异常：桌面模拟正常但iPhone真机显示错误

问题描述 #

网页在笔记本电脑通过浏览器「检查元素」及「切换设备」工具预览移动端版本时，文本显示完全正常，但在iPhone真机上打开时，文本排版与样式均不符合预期，尝试多种方法无法修复。

相关代码 #

CSS代码 #

#pricesTextContainer {
  background: #333;
  text-align: center;
  color: white;
  font-family: 'Poppins', sans-serif;
  margin-top: 50px;
  #happyHour {
    color: gold;
    font-size: 60px;
    font-weight: 800;
    margin: 0;
    padding: 0;
  }
  #discount {
    color: white;
    text-decoration: underline wavy rgb(95, 204, 255);
    text-underline-offset: 10px;
    text-decoration-thickness: 4px;
    font-size: 60px;
    font-weight: 800;
    margin: 0;
  }
  p {
    font-size: 40px;
    margin: 0;
  }
  #reservations {
    font-size: 15px;
    font-weight: 100;
    margin-top: 10px;
  }
}

HTML代码 #

<div id="pricesTextContainer">
  <p id="happyHour">HAPPY HOUR</p>
  <p id="discount">30% OFF KARAOKE</p>
  <p>MONDAY / TUESDAY / THURSDAY: 9PM - 12AM <br> SUNDAY: ALL DAY</p>
  <p id="reservations">Reservations Recommended</p>
</div>

显示效果对比 #

预期效果（浏览器移动端模拟） #

iPhone真机实际效果 #

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