Search code examples
cssmobilemobile-websitemobile-webkit

Font size relative to parent box height

I have block level elements with its height property set in %. Inside these block level elements are <span>s with text. Example:

<body style="height: 100%;">
    <menu style="height: 10%;">
        <button style="display: block; height: 100%;">
            <span style="font-size: 4em; line-height: 200%;">text</span>
        </button>
    </menu>
</body>

This looks fairly well on a mobile browser, except when I rotate the device (that is, once the body.onorientationchange event kicks in), the text becomes too big.

So my question is, how can I specify the text size relative to the height of the parent element?

Solution

  • This will disable font size change on rotation, which pretty much solves my problem. Borrowed from here.

    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0">

    UPDATE: changed from semicolons to commas as Mark suggested.