Question

我在Galaxy Note上的Android 4.0上出现了一个非常不寻常的错误。有些朋友在他们的Galaxy S3上也看到了同样的东西。我将代码简化为以下内容：

<!DOCTYPE html>
<html>
        <head>
                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
                <meta name="viewport" content="width=device-width,  maximum-scale=1.0,initial-scale=1.0, user-scalable=no" />
        <style type="text/css">
        #movieplayer {width:100%; position:fixed; top:0px; left:0px; right:0px; bottom:0; background:yellow; z-index: 90;}
        .player, .project-info {width:100%}
        #movieplayer .short-info {width:100%;background:green;display:block;position:relative;}

        </style>

        </head>

        <body class="works">
        <div id="global-container">

                <div id="movieplayer">
                        <div class="player">
                                <div class="project-info movie">
                                        <div class="short-info jspScrollable">
                                                <div class="container">
                                                        hello
                                                </div>
                                        </div>
                                </div>
                        </div>

                </div>

        </div>
        </body>
</html>

首次在PORTRAIT中加载此页面时，您应该会在黄色背景上看到一个绿色条。它们都填满了100％的屏幕宽度。将手机旋转到横向时，黄色会继续填充屏幕的其余部分，但绿色条无法填充剩余的宽度。这是为什么？

我在这里使用#movieplayer {position：fixed;}，因为在我的真实代码中，我依靠它来做其他一些事情。所以我不能使用position：absolute。

Answer 1

这个问题在Android浏览器的某些版本中似乎是一个错误。

由于调整大小事件，不要求固定位置容器下的元素集重新计算其宽度（在reflow期间）。

您的解决方案有效，因为它是强制重新计算的several ways之一。

奇怪的是，我们发现css中任何特定于景观的媒体查询都会为我们修复它。（在Galaxy S3上测试）：

@media screen and (orientation: landscape){
  .doesnt-exist { background:red; }
}

相关链接： Android Issue 27959 Android Issue (dup) 25610

Answer 2

好的，我能够一起破解解决方案。我安装了jquery，然后我做了一个

$('.short-info').css('position','absolute');
setTimeout("$('.short-info').css('position','');", 0);

这很难看，但确实有效。

Android CSS位置：设备旋转后修复

2 个答案: