Question

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

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

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

Answer 1

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

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

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

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

参考：Media Queries

编辑：

为澄清评论，我在下面提供了针对特定问题的解决方案。如果有人来这里发现该建议有用，我将保留上述评论。

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>

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

1 个答案: