iPhone移动端字体大小未随Media Query生效问题求助

算力阿峰

2026-7-21

问题原因及解决方案

问题出在这两点：

媒体查询逻辑错误：你用的是min-width（最小宽度）规则，当iPhone横屏时，屏幕宽度会超过481px（比如iPhone 14横屏宽度为844px），此时会触发@media (min-width:481px)及以上的规则，字体被强制改成16px，和你预期的小型设备36px不符。
冗余且冲突的规则：你在min-width:1025px区间设置了font-size:26px，这和你「桌面端字体16px」的需求冲突；同时多个区间重复设置16px，既冗余又容易引发规则覆盖混乱。

修正后的代码

简化逻辑，先定义桌面端默认样式，再针对小屏幕设备覆盖样式，写法更直观：

/* 桌面端默认字体：16px */
p.Description {
    font-size: 16px;
}

/* 小型设备（含iPhone竖屏+横屏）：36px */
@media (max-width: 850px) {
    p.Description {
        font-size: 36px;
    }
}