html - 媒体查询正在运行，但与它们应有的方式相反

Question

一段时间以来，我一直在尝试构建一个网站，该网站可以在所有小于平板电脑的设备上以横向模式进行修复，但这确实令人头疼。我不知道我在做什么，或者我做错了什么。

我认为我的媒体查询全错了。我需要网站以纵向模式开始，但在移动设备上查看时，它会固定为横向模式。经过多次修补，我几乎可以正常工作了，但是它走错了路!在桌面上它是横向模式，然后在移动设备上它是纵向模式!它在 mock 我!哈哈

这是一个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是改变body的高度和宽度

例如:通常

-----40px-----

|
|
|
100px
|
|
|

旋转90度变成

-----100px-----

|
|
|
40px
|
|
|

这个css一定有用

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