css - 'letterbox' Android 平板电脑的响应式设计

Question

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

Answer 1

使用媒体功能 aspect-ratio :

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