7

我在 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;} 因为在我的真实代码中，我依靠它来做一些其他的事情。所以我不能使用位置：绝对。

4

2 回答 2

9

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

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

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

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

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

相关链接： Android 问题 27959 Android 问题 (dup) 25610

于 2013-04-29T07:46:56.897 回答
1

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

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

这很丑陋，但它有效。

于 2013-04-24T20:16:41.107 回答