移动网站上的文字无法正确显示

Question

我正在开发的网站的某些文本使用检查元素正确显示，并使用“切换设备”工具查看网站以在我的笔记本电脑上查看移动版本，但是在我的实际 iPhone 网站上并未按应有的方式显示，并且我所做的一切都无法解决它。

这是我的文本 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>

这是我的文本 CSS：

#pricesTextContainer{
    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;
    }
}

它应该是这样的（看起来像在桌面“移动视图”上）：

这是它在我的实际 iPhone 上的样子：

Answer 1

造成这种差异的一个潜在原因可能是 CSS 选择器的特殊性。

像这样尝试一下...

#pricesTextContainer {
    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;
}

#pricesTextContainer p {
    font-size: 40px;
    margin: 0;
}

#reservations {
    font-size: 15px;
    font-weight: 100;
    margin-top: 10px;
}