这是关于在 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>
行为:虽然这两个表格在默认方向(纵向)中以相同的字体大小显示，但当旋转设备时，全宽表格显示的 TD/TH 的 COLSPAN=2 更大的字体大小(截图来自 iPhone):
这似乎是 Safari 中的一个错误，但无论如何，我必须绕过它。
有什么好的解决方法吗？
谢谢。
最佳答案
这是因为有时 Safari webview 会在认为这是个好主意时自动缩放文本。
要禁用此行为，请将其添加到您的正文 CSS 样式中:
-webkit-text-size-adjust:none;
关于iphone - 使用 colspan 为 TD 旋转 iPhone 时出现奇怪的行为，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6652764/