Question

我创建了一个网站，该网站只能在平板电脑上以横向模式查看。

使用CSS，如果用户以纵向模式加载网站，是否可以隐藏网站并显示图像/文字？

预先感谢您的帮助， ZeBobo

Answer 1

是的，您可以使用CSS Media查询。

代码是从MDN文档复制的。这说明了如何使用横向和纵向方向。

body {
  display: flex;
}

div {
  background: yellow;
}

@media (orientation: landscape) {
  body {
    flex-direction: row;
  }
}

@media (orientation: portrait) {
  body {
    flex-direction: column;
  }
}

<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>

使用时要小心。没有提供实际的兼容性列表。

Answer 2

您可以使用媒体查询：

@media screen and (orientation:portrait) { … }
@media screen and (orientation:landscape) { … }

您可以在内部指定显示内容，即有关如何查看页面的文本信息。

使用CSS在平板电脑上禁用纵向模式

2 个答案: