在移动设备上将网站固定为水平方向(简单来说)

时间:2015-03-17 18:27:39

标签: css css3 media-queries screen-orientation mobile-devices

我正在努力创建一个网页,当在移动设备上查看时,该网页会自动修复横向方向而不是纵向方向。这是一个非常简单的页面,目前只包含一个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>

代码已更新

0 个答案:

没有答案