媒体查询正在发挥作用，但与其应有的相反

Question

我现在已经尝试了一段时间来建立一个网站，在比平板电脑更小的所有设备上修复横向模式，但这真是令人头痛。我不知道我在做什么，或者我做错了什么。

我认为我的媒体查询都错了。我需要网站以纵向模式开始，但在移动设备上查看时，它会以横向模式进行修复。经过多次修修补补后，我几乎可以正常工作，但这是错误的方式！在桌面上，它处于横向模式，然后在移动设备上处于纵向模式！它嘲笑我！哈哈

以下是我尝试使用此代码的livelink。有人可以告诉我为什么这段代码不起作用？如果您调整浏览器大小，您将看到自己出了什么问题。

以下是我的代码。

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>

的 更新

我现在已经在较小的调整大小的桌面浏览器大小上更正了旋转，但是在移动设备上仍然没有旋转。

Answer 1

@media (max-width: 600px)
body {
  transform: rotate(90deg);
  transform-origin: 50% 50%;
}

以上css正在改变身体的高度和宽度

ex：通常

- - - - - - - - 40像素

|
 |
 |
100px的
 |
 |
 |

旋转90度后变为

- - - - - - - - 100像素

|
 |
 |
40像素
 |
 |
 |

这个CSS必须有用

@media (max-width: 600px)
iframe {
  transform: rotate(90deg);
  /* transform-origin: 50% 50%; */
  width: 100vw!important;
  height: 100vh!important;
}