Question

我正在写一个非常简单的网站来显示视频。我有不同的样式表用于设备的不同旋转状态，如下所示：

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

任何人都可以借此向我们提供方向吗？

提前感谢您的帮助。

Answer 1

在样式表中，您可以为不同的方向做出改变

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

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

这允许您对同一个类（或ID或标记）有两个定义，并且当您将设备转换为另一个方向时，它应该动态更新您的页面

iphone / ipod移动safari导致视频元素在旋转时消失

1 个答案: