使用colspan为TD转动iPhone时出现奇怪的行为 [英] Weird behaviour when rotating iPhone for TDs with colspan
问题描述
设置：两个相同的表格，但其中一个具有（CSS）宽度为69％，而另一个为100％。
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Strict // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
< html>
< head>
< meta http-equiv =Content-typecontent =text / html; charset = UTF-8/>
< meta name =HandheldFriendlycontent =true/>
< meta name =viewportcontent =width = device-width，initial-scale = 1.0，user-scalable = yes/>
< meta name =apple-mobile-web-app-capablecontent =yes/>
< title>测试< /标题>
< style>
表
{
border-collapse：collapse;
}
th
{
font-weight：normal;
border：1px纯红色;
}
td
{
border：1px纯绿色;
}
＃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）：
这似乎是Safari中的一个错误，但是，我必须避开它。
任何关于体面解决方法的想法？
谢谢。
要禁用此功能行为将其添加到您的身体CSS样式：
-webkit-text-size-adjust：无;
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):
This seems to be a bug in Safari but, nonetheless, I have to get around it.
Any idea about a decent workaround?
Thanks.
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;
这篇关于使用colspan为TD转动iPhone时出现奇怪的行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
