1

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;
}

font-sizeHTML コードのコメントで示されているように、メディア クエリによって大きく影響を受けるテキストと、影響を受けないテキストがあります。奇妙なことに、メディアクエリのall代わりに書いhandheldてデスクトップブラウザでテストすると...すべてのテキストがルールの影響を受けるため、セレクタの問題ではないと思います。

また、この質問の回答に記載されているすべてのことを試しました:テキストが一貫してレンダリングされず、一部のフォントが他のフォントよりも大きいモバイル Safari (iPhone) でのフォント サイズの問題を修正しますか? （成功せずに）。

編集: 記載されているバージョンを私の開発環境のフォルダーにコピーしました。ライブで見たい場合は、変更の影響を受けません (非常に遅い):確認してください!

4

2 に答える 2

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/

于 2013-03-19T13:01:05.253 に答える
1

どうやら Safari はhandheldメディア クエリのセレクターを無視します。そのため、メディア クエリはまったくトリガーされませんでした。クエリ-webkit-text-size-adjust: 100%内にあるためにトリガーされなかったため、テキストはさまざまなサイズで表示されました。@media handheld

于 2013-03-19T15:04:21.273 に答える