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?（没有任何成功）。

编辑：将描述的版本复制到我的开发环境中的文件夹中，如果你想要实时查看它（veeeery slow）不会受到更改的影响：Check it out!

Answer 1

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

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

Answer 2

显然，Safari会忽略媒体查询中的handheld选择器。因此媒体查询根本没有触发。文本显示的大小不同，因为-webkit-text-size-adjust: 100%未触发，因为它位于@media handheld查询中。

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

2 个答案: