Android 平板电脑（Samsung Galaxy 选项卡）- 表格在方向变化时搞砸了答案

【问题标题】：Android tablet (Samsung galaxy tab) - table messes up on orientation changeAndroid 平板电脑（Samsung Galaxy 选项卡）- 表格在方向变化时搞砸了
【发布时间】：2013-08-21 00:25:59
【问题描述】：

我在这个小提琴中有一张简单的桌子

http://jsfiddle.net/FzSwP/3/

CSS

table {
    width: 100%;
}
td {
    padding: 10px;
    border: 1px solid #ccc;
}
.name {
    background: url("http://www.lexus.ca/images/footer/logo.gif") no-repeat right center transparent;
    padding-right: 40px;
    width: 20%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

当我在三星 Galaxy 选项卡上查看它时，在初始加载时，一切似乎都很好，但一旦我开始改变方向，事情就变得奇怪了。换成横屏时，显示全乱了，看起来文字重叠。看起来它正在显示以前的方向文本和当前的方向文本。就像屏幕改变了方向/调整了大小，但屏幕上的显示没有完全更新。

我的平板电脑是 android 4.0.4，使用股票浏览器。

我不确定它在其他 Android 平板电脑中的外观，因为我手边没有。

有没有办法纠正这种行为？或者其他人可以确认这不是在不同的设备上发生的吗？如果有的话，我对 js/jquery 解决方案持开放态度

【问题讨论】：

我强烈建议下载 Android SDK。它带有一个模拟器，您可以为其设置屏幕大小，以便模拟不同的设备。否则，+1 因为我自己经常不得不处理这种情况——我什至买了三部不同的手机和两台平板电脑（银河标签，7 英寸和 10.1 英寸），以便我可以更轻松地测试这些东西。
似乎某些 css 可能是问题所在，我尝试删除该小提琴的所有 css 并且方向更改似乎有效，但当然在我的使用中，我不能只删除所有内容。三星 Galaxy 在创建响应式网站时给了我各种各样的问题。

标签： javascript android jquery html css

【解决方案1】：

我在这里回答这个问题，所以如果其他人遇到同样的事情可以更轻松

问题在于 webkit 浏览器（如 android 股票浏览器），因为它没有完全呈现表格。正如我的同事解释的那样：有一个重绘标志或类似的东西，当你切换方向时，这个标志不会重置，因此它不会完全重绘。要解决这个问题，只需简单地隐藏元素并检查它的高度然后显示。使用jquery是一个非常简单的过程

$('.element').hide().height();
$('.element').show();

http://jsfiddle.net/FzSwP/5/

链接它很可能也会起作用，我只是把它放在 2 行中，这样更容易理解。在显示工具提示时，我也在桌面 chrome 上看到了这一点，同样的事情将解决这个问题。

【讨论】：