“信箱” Android 平板电脑的响应式设计

Question

我正在设计一个基于网络的人造 PowerPoint 演示文稿，以便它可以在所有设备上运行。它以横向格式运行，在大多数设备上都能正常运行，但在高度较短的屏幕上，CinemaScope（就像在我的 Android 平板电脑上一样），我遇到了问题。理想情况下，我想缩小视口高度并减少侧边距以恢复到更“正常”的比例。我可以编写一个@media 开关来缩小外部 div，但我不知道如何测试比例而不是宽度。有这样的机制吗？

Answer 1

使用媒体功能aspect-ratio：

@media screen and (min-aspect-ratio: 1601/900) {
  /* Styles for very wide screens */
  ...
}