个人中心
文章发布
退出
作者热门文章
- iOS/Objective-C 元类和类别
- objective-c - -1001 错误，当 NSURLSession 通过 httpproxy 和/etc/hosts
- java - 使用网络类获取 url 地址
- ios - 推送通知中不播放声音
24
4
我在 Galaxy Note 上的 Android 4.0 上出现了一个非常不寻常的错误。一些 friend 在他们的 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>
当您第一次以纵向模式加载此页面时，您应该会在黄色背景上看到一个绿色条。它们都 100% 填充屏幕宽度。当您将手机旋转到横向时，黄色继续填充屏幕的其余部分，但绿色条无法填充剩余的宽度。这是为什么？
我在这里使用#movieplayer{position:fixed;} 因为在我的真实代码中，我依靠它来做一些其他的事情。所以我不能使用 position:absolute。
最佳答案
这个问题似乎是某些版本的 android 浏览器中的错误。
作为调整大小事件的结果，固定位置容器下的元素集不会被要求重新计算它们的宽度(在 reflow 期间)。
您的解决方案有效，因为它是 several ways 之一强制重新计算。
奇怪的是，我们发现 css 中任何特定于横向的媒体查询都可以为我们修复它。(在 Galaxy S3 上测试):
@media screen and (orientation: landscape){
.doesnt-exist { background:red; }
}
关于Android CSS 位置 :fixed after a device rotate，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16200972/
24
4
0
我是一名优秀的程序员,十分优秀！