Android CSS 位置：在设备旋转后固定答案

【问题标题】：Android CSS position:fixed after a device rotateAndroid CSS 位置：在设备旋转后固定
【发布时间】：2013-04-24 19:54:39
【问题描述】：

我的 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。

【问题讨论】：

标签： android css

【解决方案1】：

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

由于 resize 事件，固定位置容器下的元素集不会被要求重新计算它们的宽度（在reflow 期间）。

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

奇怪的是，我们发现 css 中任何特定于风景的媒体查询都可以为我们解决这个问题。（在 Galaxy S3 上测试）：

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

【讨论】：

【解决方案2】：

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

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

这很难看，但它有效。

【讨论】：