Question

这是关于在iPhone的浏览器中显示一个简单的HTML页面，带有旋转。

设置：两个相同的表，但其中一个表的（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>

行为：虽然两个表格在默认方向（纵向）中显示的字体大小相同，但在旋转设备时，全宽度表格会显示一个COLSPAN = 2的TD / TH 更大的字体（截图来自iPhone）：

Portrait Landscape

这似乎是Safari中的一个错误，但是，我必须绕过它。

关于体面的解决方法的任何想法？

感谢。

Answer 1

这是因为有时Safari webview会在认为它是一个好主意时自动缩放文本。

要禁用此行为，请将此添加到您的正文CSS样式：

-webkit-文字大小调整：无;

使用colspan为TD转动iPhone时的奇怪行为

1 个答案: