Android CSS位置：设备旋转后固定_Android_Css

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

android css

Android CSS位置：设备旋转后固定,android,css,Android,Css,我在Galaxy Note上的Android 4.0上出现了一个非常不寻常的bug。一些朋友在他们的星系S3上也看到了同样的情况。我将代码简化为以下内容： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta n

我在Galaxy Note上的Android 4.0上出现了一个非常不寻常的bug。一些朋友在他们的星系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>


#电影播放器{宽度：100%；位置：固定；顶部：0px；左侧：0px；右侧：0px；底部：0；背景：黄色；z索引：90；}
.player、.project信息{宽度：100%}
#电影播放器。短信息{宽度：100%；背景：绿色；显示：块；位置：相对；}
你好

当您第一次以纵向方式加载此页面时，您应该会在黄色背景上看到一个绿色条。它们都100%地填满了屏幕宽度。当您将手机旋转至横向时，黄色会继续填充屏幕的其余部分，但绿色条无法填充剩余宽度。为什么会这样

我在这里使用#movieplayer{position:fixed；}，因为在我的实际代码中，我依赖它来做其他事情。所以我不能使用position:absolute。

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

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

这很难看，但它可以工作。

这个问题似乎是android浏览器某些版本中的一个bug

“调整大小”事件的结果不会要求“固定位置”容器下的元素集重新计算其宽度（期间）

您的解决方案是有效的，因为它是强制重新计算的一种方法

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