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;} を使用しているのは、実際のコードではこれに依存して他の処理を行っているためです。したがって、position:absolute は使用できません。

4

2 に答える 2