0

テキストのスケーリングに関する Android ブラウザーの動作が理解できません。ここに私のHTMLコードがあります:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=600">
<title>TestBug</title>
<style type="text/css">
    html, body {
        font-size:16px;
        font-family: Arial, sans-serif;
    }
    p {
        width:600px;
        margin:0 auto;
        height:200px;
        background-color:#bbeabb;
        font-size:16px;
    }
</style>
</head>
<body>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
    minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
    ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
    voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
    sint occaecat cupidatat non proident, sunt in culpa qui officia
    deserunt mollit anim id est laborum.
    </p>
</body>
</html>

問題は、ここに高さが固定された p 要素があることです。また、この p 内のテキストの font-size は 16 px と定義されています。デスクトップでどのように見えるかの画像があります：

デスクトップブラウザに表示される、高さ 200px 固定の段落

Android ブラウザーで同じページを見ると、デスクトップ ブラウザーとまったく同じように表示されると予想されます (背景が緑色でテキストがあふれていない段落)。段落の高さの約半分を占めます。しかし、代わりに次のことが起こっています。

Android ブラウザに表示される固定 200px の高さの段落

ご覧のとおり、段落の高さと幅は、幅が 600 px の viewport-metatag の使用法に従ってスケーリングされましたが、テキストの高さはそれに応じてスケーリングされませんでした。

ただし、「em」単位を使用する場合はすべて問題ありません。

誰かがここで何が起こっているのか説明してもらえますか?

4

1 に答える 1

0

'text-size'-設定はブラウザ設定で'large'に設定されました。そのため、ページ測定では常にemsを使用するのが最適です。

于 2012-04-24T16:01:50.593 に答える