Android CSS位置：設備旋轉後固定

我有一個非常不尋常的錯誤出現在我的Android 4.0 Galaxy Note上。一些朋友在他們的Galaxy S3上看到了相同的效果。我簡化了我的代碼如下：Android CSS位置：設備旋轉後固定

<!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。

來源

2013-04-24 John

好的，我能夠一起解決一個解決方案。我有jquery安裝，然後我做了一個

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

這是醜陋的，但它的工作原理。

來源

2013-04-24 20:16:41 John

對方回答是更好的方式，它只是工作！ – Adaptabi 2013-09-19 21:33:26

爲我修復了它。 – 2015-11-11 11:08:42

這個問題看起來像是某些版本的android瀏覽器中的一個bug。

作爲調整大小事件的結果，不會要求固定位置容器下的元素集重新計算其寬度（在reflow期間）。

您的解決方案有效，因爲它是several ways之一，用於強制進行重新計算。

奇怪的是，我們發現在css中任何景觀特定的媒體查詢都會爲我們修復它。（銀河S3測試）：

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

來源

2013-04-29 07:46:56

Android CSS位置：設備旋轉後固定

回答

相關問題