5

Chrome および Firefox モバイル ブラウザーでは、h1 が特定の長さを超えると、ページ上のすべての静的配置テキストのフォント サイズが大きくなりますが、絶対配置テキストは大きくなりません。問題を引き起こすために必要な h1 の長さは、ブラウザと (おそらく) デバイスに依存するようです。

たとえば、Chrome または Firefox を使用する Nexus 4 では、次のコードの h1 テキストと静的に配置された div テキストは大きすぎてレンダリングされますが、絶対配置された div テキストは通常​​のサイズでレンダリングされます。h1 タグから 2 文字のテキストを削除すると、すべてのテキストが Chrome で通常のサイズでレンダリングされます。さらに 2 文字を削除すると、すべてのテキストが Firefox で通常のサイズでレンダリングされます。

    <html>
    <body style="margin: 0;">
    <h1 style="font-size: 1em;">h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1</h1>
    <div style="font-size: 1em;">div</div>
    <div style="position: absolute; font-size: 1em;">absolute</div>
    </body>
    </html>

なぜこれが起こるのか、それを制御する方法を知っている人はいますか?

4

1 に答える 1

0

ビューポート メタを試してみましたか? このメタを使用すると、モバイル ブラウザはサイズ仕様に基づいて特定の要素のサイズを決定できます。

これを適用する方法は次のとおりです。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
于 2013-08-25T04:53:55.600 に答える