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

【问题标题】：Why is text with same formattings rendered differently on the iPhone为什么具有相同格式的文本在 iPhone 上呈现不同
【发布时间】：2013-03-08 03:40:36
【问题描述】：

我遇到了一种奇怪的行为，即在 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 代码中用 cmets 标记的那样...有一些文本会受到媒体查询产生的更大的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!

【问题讨论】：

标签： iphone html css media-queries

【解决方案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/

【讨论】：

刚刚将此添加到问题中，抱歉。是的，我做到了……但没有成功。

【解决方案2】：

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

【讨论】：