iphone - 为什么具有相同格式的文本在 iPhone 上呈现不同

Question

我遇到一种奇怪的行为，即具有相同格式的文本在 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 &uuml;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 并在桌面浏览器上测试它......所有文本都受到规则的影响所以我估计不是选择器的问题。

我还尝试了这个问题的答案中描述的所有内容:Fix font size issue on Mobile Safari (iPhone) where text is rendered inconsistently and some fonts are larger than others? (没有任何成功)。

编辑:将描述的版本复制到我的开发环境中的一个文件夹中，如果您想实时查看它，则不会受到更改的影响(非常慢):Check it out!

Answer 1

您是否尝试过在 body 上使用 -webkit-text-size-adjust: 100%？

https://developer.mozilla.org/en-US/docs/CSS/text-size-adjust
http://blog.55minutes.com/2012/04/iphone-text-resizing/