我正在努力创建一个网页,当在移动设备上查看时,该网页会自动修复横向方向而不是纵向方向。这是一个非常简单的页面,目前只包含一个iframe的视频。
我使用的是我发现的由其他人开发的代码。但我根本无法让它发挥作用。我试图实现的代码在JSFiddle。
中以下是我尝试使用此代码的livelink。有人可以告诉我为什么这段代码无效?
以下是我的代码。
CSS
<style type="text/css">
body, html
{
margin: 0; padding: 0; height: 100%; overflow: hidden;
}
#content
{
position:absolute; left: 0; right: 0; bottom: 0; top: 0px; top: -15px;
min-height: 100%;
min-width: 100%
}
html, body {
height: 100%;
min-height: 100%;
}
@media screen and (min-aspect-ratio: 2/1) {
body {
transform: rotate(90deg);
transform-origin: 50% 50%;
}
}
HTML
<div id="content">
<iframe src="//fast.wistia.net/embed/iframe/qnca9gdlv5?videoFoam=true" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen width="640" height="388"></iframe><script src="//fast.wistia.net/assets/external/E-v1.js"> </script>
</div>
代码已更新