Jquery mobile 使用Apple Smart App Banner-jQuery Mobile时，移动网站始终呈现为风景

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

布局会根据横向/纵向进行更改，并相应调整宽度

最近，苹果应用商店发布了配套的本机移动应用程序——我实现了苹果智能应用程序的横幅

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

这是一个问题，因为在肖像中，一切看起来都很时髦

我找不到解决这个问题或正在发生的事情的方法

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

---

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

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

我通过使用

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

特定的代码会很有帮助。我甚至不确定我会在这里提供什么，因为它不是网站上的一个特定片段。我想添加上下文-它似乎会影响“ui内容”容器中的内容。该站点的标题似乎呈现正确。我实际上只是指在文档的标题中添加以下内容：

，然后在css中使用媒体查询，如下所示：

@media-only-screen和（orientation:grait）{some-content{width:350px；}@media-only-screen和（orientation:scape）{some-content{width:450px；}

iPhone5没有这种行为-它在4s和更低版本上都有这种行为。我不确定这是否有帮助，但您可以尝试：