如何在浏览器窗口中以纵向模式显示内容？

Question

基本上我想告诉浏览器考虑并以纵向模式显示当前内容。有没有办法使用 CSS、JavaScript、jQuery 或任何其他库/框架？这专门用于台式机（专门在电视上显示）而不是手机。我不想从设备设置中更改方向，而是更改整个内容/浏览器窗口的方向。

我尝试使用 CSS 旋转整个主体，但内容宽度超出了视口。

根据我的研究发现：https://w3c.github.io/screen-orientation/ 但我读到它只适用于移动设备上的 FF 浏览器

Answer 1

您所描述的称为响应式设计。在您的用例中，似乎需要在给定特定布局的情况下以某种方式显示内容。既然您提到特别是电视，那么这里的假设是纵横比为 16:9 的观看区域。

为了满足您的用例，您可以通过在此块中添加所有电视视口样式来使用称为媒体查询的 CSS 功能：

@media screen  and (aspect-ratio: 16/9) {
     /* Styles to display content on TV go here */
 }

在此块中使用样式规则以确保内容在电视上看起来符合您的要求。您可以通过将浏览器强制为 16:9 的屏幕大小来在大多数浏览器的开发工具中对此进行测试。当您这样做时，您将能够看到这些样式的应用。

参考：Media Queries

编辑：

根据评论澄清，我在下面为手头的具体问题提供了解决方案。如果有人来到这里并发现该建议有用，我将离开上述 cmets。

let container = document.getElementById('container');
document.querySelector('button').addEventListener('click', turn);

function turn() {
  container.classList.toggle('turn');
}

#container {
  width: 300px;
  height: 500px;
  border: 1px solid;
}

#container.turn {
  transform: rotate(270deg);
  margin-left: 150px;
}

#container img {
  display: block;
  margin: 15px auto;
}

#container p {
  padding: 15px;
}

button {
  display: block;
  width: 50%;
  margin: 0 auto;
}

<div id="container" class="turn">
  <img src="https://via.placeholder.com/150">
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <button>Switch orientation</button>
</div>