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

Posted 2023-03-06

【中文标题】使用媒体查询检测 Mobile Safari 全屏模式

【英文标题】：Detect Mobile Safari full-screen mode using media queries

【发布时间】：2012-09-20 02:59:11

【问题描述】：

ios6 为 Mobile Safari 引入了新的全屏模式。它仅适用于横向并隐藏浏览器顶部和按钮栏，以及设备状态栏。

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

我能够使用 JS document.documentElement.clientHeight 区分它们，它返回 208 默认和 320 全屏模式。

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

【参考方案1】：

所以，高度是 320 像素，方向是横向。这是媒体查询：

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

【讨论】：

我已经有一个看起来像这个的媒体查询，但是我错误地将它嵌套在另一个媒体查询中。不管怎样，你的回答是绝对正确的。

除非出现方向，否则媒体查询似乎不会触发，知道如何在启用或禁用全屏模式时触发它吗？

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

嗯，也许你可以在这里找到答案：***.com/questions/15322915/…