使用 Apple Smart App Banner 时，移动网站始终呈现为横向 - jQuery Mobile答案

【问题标题】：Mobile website always rendered as landscape when using Apple Smart App Banner - jQuery Mobile使用 Apple Smart App Banner 时，移动网站始终呈现为横向 - jQuery Mobile
【发布时间】：2012-12-04 20:38:13
【问题描述】：

我有一个移动版本的网站，它使用 CSS 媒体查询来确定方向。

布局根据横向/纵向变化并相应调整宽度。

最近，配套的原生移动应用已在 Apple 应用商店中发布 - 我实现了 Apple Smart App Banner。

问题在于，在显示智能横幅时 - 呈现的布局是横向版本的 - 无论实际方向如何。

这是一个问题，因为在纵向上，一切看起来都很时髦。

我找不到解决此问题的方法或发生的情况。

为了提供更多上下文 - 这是一个 Rails 项目 - 移动网站是使用 jQuery Mobile 构建的。

有其他人经历过这种情况或知道解决方案吗？

【问题讨论】：

具体代码会有所帮助。
我什至不确定我会在这里提供什么，因为它不是来自该站点的特定 sn-p。我想添加上下文 - 它似乎会影响“ui-content”容器中的内容。该网站的标题似乎正确呈现。
我真的只是指在文档的头部添加这个：<meta name="apple-itunes-app" content="app-id=XXXXXXXXXX"> 然后在我的 css 中使用媒体查询，如下所示：@media only screen and (orientation:portrait) { #some-content { width: 350px; } } @media only screen and (orientation:landscape) { #some-content { width: 450px; } }
iPhone 5 没有这种行为 - 它在 4s 及以下版本中会发生这种情况。
我不确定这会有所帮助，但您可以尝试：stackoverflow.com/questions/6448465/…

标签： jquery-mobile mobile web

【解决方案1】：

我相信这是一个错误。如果可用宽度大于可用高度，我怀疑 iOS 只会设置“横向”标志。在 3.5 英寸 iPhone 上显示智能应用横幅时，情况就是这样。在 4 英寸 iPhone 上，情况并非如此。这就是为什么您只会在较旧的 iPhone 上看到此问题。

我发现了一个使用max-aspect-ratio 的hacky 解决方法：

<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)">

【讨论】：