如何让 Web 应用程序在 90 度旋转视口中呈现所有内容？

Question

我有一个系统，我使用 Chromecast 在监视器上显示用 React 编写的 Web 应用程序。

现在，我们需要在安装有 90 度旋转（纵向模式）的显示器上显示此 Web 应用程序。如果我只是使用 PC 作为源，旋转视频输出会很容易，Chrome 浏览器将只有一个 1080x1920 的视口来呈现网站。

但由于 Chromecast 无法旋转其输出，我需要让 Web 应用程序旋转所有内容以使其在旋转的显示器上工作。

Web 应用程序当前的编写方式是，所有元素的大小都基于相对于视口高度/宽度（vh 单位）的值，因此内容在不同屏幕上显示时会自动缩放。这也会导致问题，如下所述。

我尝试制作下面的 CSS，但它并没有真正按预期工作，因为它似乎只是在旋转内容，而不是在旋转的视口中呈现它（我希望你明白我的意思）。

body {
  transform: rotate(90deg);
}

结果是它旋转了我的 1920x1080 内容，因此它会在仍为 1920x1080 的视口中占用 1080x1920...

有什么方法可以“简单”地做到这一点，类似于更改操作系统的屏幕旋转，还是我真的应该重写所有 CSS 以支持 90 度旋转？

Answer 1

我认为您需要将width: 1080px; 添加到body。我真的不知道如何旋转屏幕，所以我让你测试一下。

body {
  transform: rotate(90deg);
  width: 1080px; /* Alternatively 100vw (maybe) */
}