我有一个使用 CSS 媒体查询来确定方向的网站的移动版本。
布局根据横向/纵向更改并相应调整宽度。
最近，配套的原生移动应用程序已在 Apple 应用商店中发布 - 我实现了 Apple Smart App Banner。
问题是在显示智能横幅时 - 呈现的布局是横向版本的 - 无论实际方向如何。
这是一个问题，因为在肖像中，一切看起来都很时髦。
我找不到解决方法或正在发生的事情。
为了提供更多上下文 - 这是一个 Rails 项目 - 移动网站是使用 jQuery Mobile 构建的。
有没有其他人经历过这种情况或知道解决方案？
我相信这是一个错误。如果可用宽度大于可用高度，我怀疑 iOS 只会设置“横向”标志。在 3.5 英寸 iPhone 上显示智能应用横幅时，就是这种情况。在 4 英寸 iPhone 上，情况并非如此。这就是为什么您只在较旧的 iPhone 上看到此问题的原因。
我通过使用找到了一个 hacky 解决方法max-aspect-ratio：
<link rel="stylesheet" href="/css/portrait.css" media="all and (max-aspect-ratio: 4/3)">
<link rel="stylesheet" href="/css/landscape.css" media="all and (orientation:landscape) and (min-width: 480px)">