Странное поведение при вращении iPhone для TD с colspan - PullRequest
Новая
       57

Странное поведение при вращении iPhone для TD с colspan

4 голосов
/ 11 июля 2011

Речь идет об отображении простой HTML-страницы в браузере iPhone с вращением.

Настройка : две идентичные таблицы, но одна из них имеет ширину (CSS) 69%, а другая - 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>

Поведение : хотя две таблицы отображаются с одинаковым размером шрифта в ориентации по умолчанию (портрет), при повороте устройства в таблице полной ширины отображаются значения TD / TH, имеющие COLSPAN = 2 в * Размер шрифта на 1010 * больше (скриншоты взяты с iPhone):

Portrait Landscape

Кажется, это ошибка в Safari, но, тем не менее, я должен ее обойти.

Есть идеи о достойном обходном пути?

Спасибо.

1 Ответ

4 голосов
/ 11 июля 2011

Это потому, что иногда веб-просмотр Safari автоматически масштабирует текст, когда он считает это хорошей идеей.

Чтобы отключить это поведение, добавьте это к своему телу. Стиль CSS:

-webkit-текст-размер-регулируйте: нет;

...