0
私はビデオを表示する非常に簡単なウェブサイトを作成しています。iphone/ipod mobile 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>
誰でもこの方向性を貸すことができますか？
ご協力いただきありがとうございます。あなたは、異なる向きのためだけでなく
@media only screen and (orientation:landscape) {
.yourclass{
}
}
@media only screen and (orientation:portrait) {
.yourclass{
}
}
を違いを作ることができ、スタイルシート内