使用媒体查询检测Mobile Safari全屏模式

iOS6为Mobile Safari引入了新的全屏模式。它只适用于横向，隐藏浏览器顶部和按钮栏以及设备状态栏。使用媒体查询检测Mobile Safari全屏模式

如何使用媒体查询检测新模式？我尝试使用宽度媒体查询，但无法使其工作。

我能够使用JS document.documentElement.clientHeight，它返回的默认208和320 全屏模式上加以区别。

顺便说一句：我不是说从主屏幕启动应用程序，这是一种不同的全屏模式。

2012-09-28 Patrick Rudolph

所以，身高是320px，方向是风景。这里的媒体查询：

@media only screen and (height : 320px) and (orientation : landscape) { 
    /* rules here */ 
}

@media only screen and (height : 320px) and (orientation : landscape) { 
    /* rules here */ 
}

2012-09-28 08:38:56 Giona

我已经有一个媒体查询看起来就像这个，但我犯了错误，让它嵌套在另一个媒体查询。无论如何，你的回答是绝对正确的。 –

媒体查询似乎不会触发，除非发生方向，任何想法如何在全屏模式启用或禁用时触发它？ – Fini

真的很烦人。全屏启用和禁用时，Safari不调用调整大小。随着所有的iPhone 5s，需要有一个解决方案。由于悬停在页面上的额外导航元素。除非我们能够解决它，否则完全会破坏移动应用程序。 – techdude

回答