我遇到了一种奇怪的行为，即在 iPhone (Safari) 上以不同大小显示具有相同格式的文本
我有以下 HTML：
<div class="page" id="thanks">
<div class="subtext">
<p>
text tex text <!-- Being displayed with the correct size -->
</p>
</div>
</div>
<div class="page" id="about">
<div id="about_us">
<div class="about_box" id="robi">
<p> text text text</p> <!-- NOT being displayed with the correct size -->
</div>
<div class="about_box" id="andrea"><p class="header">Robi über Andrea, 25</p>
<p> text text text </p> <!-- NOT being displayed with the correct size -->
</div>
</div>
</div>
这是相应的CSS：
body{
background-color:#ffffff;
font-family: 'GaramondPremrProDisp', 'EB Garamond', serif;
font-size: 17px;
margin-right: 0px;
margin-left: 0px;
margin-top: 0px;
}
@media handheld and (orientation: portrait){
body{
background-color:#ffffff;
font-family: 'GaramondPremrProDisp', 'EB Garamond', serif;
font-size: 30px;
margin-right: 0px;
margin-left: 0px;
margin-top: 0px;
}
}
div.page{
min-width: 100%;
position: relative;
z-index: 50;
}
div.page div.subtext{
width: 68%;
max-width: 1100px;
margin-left: auto;
margin-right: auto;
}
div.page div.subtext p{
text-align: center;
}
div#about div#about_us{
width: 68%;
height: 900px;
margin-left: auto;
margin-right: auto;
}
div#about div.about_box{
text-align: center;
height: 450px;
float: left;
clear: both;
}
正如 HTML 代码中的注释所标记的那样……有些文本会受到font-size媒体查询产生的较大影响，而文本则不受影响。奇怪的是，如果我写all而不是handheld在媒体查询中并在桌面浏览器上测试它......所有文本都受到规则的影响，所以我想这不是选择器问题。
我还尝试了这个问题的答案中描述的所有内容：修复 Mobile Safari (iPhone) 上的字体大小问题，其中文本呈现不一致并且某些字体比其他字体大？（没有任何成功）。
编辑：将描述的版本复制到我的开发环境中的一个文件夹中，如果你想实时查看它，它不会受到更改的影响（非常慢）：检查一下！