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

标签 css orientation tablet

<分区>


关闭 4 年前

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

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

预先感谢您的帮助, 泽波波

最佳答案

是的,您可以使用 CSS 媒体查询。

MDN Docs

代码是从 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>

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

关于css - 使用 CSS 在平板电脑上禁用纵向模式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54253193/

上一篇:html - 在最小化窗口内联显示侧面板

下一篇:javascript - 将 <li> 附加到 <ul> 的底部

相关文章:

php - 如何使用二十三子主题创建用于在类别页面中显示帖子的模板?

jquery - css选择器理解

java - android - 如何获取当前方向?

java - 方向更改时 fragment 重新启动

asp.net 检测任何带有用户代理字符串的平板电脑设备

javascript - 针对安卓移动设备

html - 强制 <div> 留在一个地方

javascript - 重置按键输入字段的背景不透明度

javascript - Android/Web 应用程序 - 将方向从横向设置为纵向模式

html - 显示常见智能手机和平板电脑屏幕分辨率的图表?