Search code examples
iphonehtmlrotationmobile-safarihtml-table

Weird behaviour when rotating iPhone for TDs with colspan

This is about displaying a simple HTML page in iPhone's browser, with rotation.

Setup: two identical tables but one of them has a (CSS) width of 69% while the other is at 100%.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    <meta name="HandheldFriendly" content="true" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable = yes" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>Test</title>
    <style>
    table
    {
        border-collapse: collapse;
    }
    th
    {
        font-weight: normal;
        border: 1px solid red;
    }
    td
    {
        border: 1px solid green;
    }
    #t1
    {
        width: 69%;
    }
    #t2
    {
        width: 100%;
    }
    </style>
</head>
<body>
    <table id="t1">
        <tr><th colspan="2">TH COLSPAN 2</th></tr>
        <tr><td colspan="2">TD COLSPAN 2</td></tr>
        <tr><td>CELL 1</td><td>CELL 2</td></tr>
    </table>
    <hr />
    <table id="t2">
        <tr><th colspan="2">TH COLSPAN 2</th></tr>
        <tr><td colspan="2">TD COLSPAN 2</td></tr>
        <tr><td>CELL 1</td><td>CELL 2</td></tr>
    </table>
</body>
</html>

Behaviour: although the two tables are displayed with the same font size in the default orientation (portrait), when rotating the device the full width table displays TDs/THs having a COLSPAN=2 in a bigger font size (screenshots are taken from iPhone):

Portrait Landscape

This seems to be a bug in Safari but, nonetheless, I have to get around it.

Any idea about a decent workaround?

Thanks.

Solution

  • This is because sometimes Safari webview Zooms text automatically when it thinks its a good idea.

    To disable this behavior add this to your body CSS Style:

    -webkit-text-size-adjust:none;