iPhone/iPod的移動Safari瀏覽器使影像元素消失在旋轉

我寫一個非常簡單的網站，顯示的視頻。我對裝置的不同的旋轉狀態，像這樣分離的樣式表：iPhone/iPod的移動Safari瀏覽器使影像元素消失在旋轉

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait-style.css"/> 
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape-style.css"/>

片材負載和正常顯示的內容時，用戶首先導航到在各自的取向的部位。但是，當用戶更改方向時，以下代碼中的視頻元素將消失，而正確應用所有其他方向的樣式。

<video id="mainvideo" width="640" height="480" controls preload="auto"> 

     <source src="output.ogv" type="video/ogg" />  
     <source src="output.mp4" type="video/mp4" />  

     <object width="640" height="480" data="flowplayer-3.2.5.swf" type="application/x-shockwave-flash"> 
      <param name="movie" value="flowplayer-3.2.5.swf" /> 
      <param name="allowfullscreen" value="true"/> 
      <param name="allowscriptaccess" value="always"/> 
      <param name="flashvars" value="config={'clip':{'url':'output.flv', 'autoPlay':false, 'autoBuffering':true}}" /> 
     </object> 

     <div id="trollface"> 
     <p>You do not have Adobe flash player installed on your browser. You may download it <a href="http://get.adobe.com/flashplayer/">here</a>.</p> 
     </br> 
     <p>Alternatively, you may also use a modern, standards-compliant browser (such as <a href="http://www.mozilla.com/en-US/firefox/">firefox</a>, <a href="http://www.google.com/chrome/intl/en/landing_chrome_mac.html?hl=en">chrome</a>, <a href="http://www.opera.com/">opera</a>, or <a href="http://www.apple.com/safari/">safari</a>), or download the video by clicking the download link below.</p> 

     </div> 

    </video>

任何人都可以借我們這個方向嗎？

預先感謝您的幫助。

來源

2011-01-11 Aeschylus

裏面的樣式表，你可以有所作爲，以及針對不同方向

@media only screen and (orientation:landscape) { 
    .yourclass{ 
    } 
} 

@media only screen and (orientation:portrait) { 
    .yourclass{ 
    } 
}

這可以讓你有相同的類（或ID，或標籤）兩個定義，它應該是動態更新頁面當您將設備與另一個取向

來源

2011-07-08 06:28:32

iPhone/iPod的移動Safari瀏覽器使影像元素消失在旋轉

回答

相關問題