退出 html5 全屏模式时 css 媒体查询不起作用 - safari

Posted 2023-02-25

【中文标题】退出 html5 全屏模式时 css 媒体查询不起作用 - safari

【英文标题】：When exiting html5 full screen mode css media queries don't work - safari

【发布时间】：2013-06-14 21:24:37

【问题描述】：

我在支持它的浏览器上使用 html5 全屏模式（还不能共享代码链接，它还没有上线）。我遇到了一个我认为可能是 Safari 错误的问题，但我也想在这里发帖，看看是否有人对解决方法有建议。

我的应用正在使用一个图像滑块，该滑块有一个 div，其上方带有链接以实现悬停效果（很难解释，但请耐心等待）。图像和悬停 DIV 的默认宽度都是 1150 像素（通过 CSS），并且使用媒体查询来指定链接 div 宽度（这是 SCSS 代码，因此对于不习惯它的人来说可能看起来很有趣）。

.links 
    width: 1150px;
    height: 744px;      
    position: absolute;
    z-index: 101;
     @media (max-width: 1200px) 
        width: 910px;
        height: 588.77px;
        

我还提供了一种全屏显示方式（通过 HTML5 全屏显示），并为此 div 指定自定义宽度/高度（因为屏幕尺寸会有所不同，并且我的链接必须悬停在某些位置，使用百分比） .所有这些工作正常。将浏览器拖动到 1200 像素以下和 1200 像素以上之间，悬停状态会随着图像正确缩放。转到全屏，一切都在图像和悬停上适当缩放。但是，如果我从一个浏览器开始 1) 尺寸小于 1200 像素 2）进入全屏 3) 然后退出全屏模式仅在 Safari 中它不会根据媒体查询进行缩放，并且 .links 类的大小为 1150 像素宽。

如果我调整任何东西的大小，它会恢复正常工作/缩放。

我想不出在调整大小事件之外触发 CSS 媒体查询的方法。我不想在全屏退出时通过 jQuery 添加单独的类，因为我必须在后续调整大小时将其删除。

还有其他解决方法的建议吗？

【参考方案1】：

好的，所以我在我的应用程序之外用相同的条件（没有其他代码）做了一个模型，并意识到在那个测试中这在 Safari 中工作。我正在使用：

$(document).stop(true, true); 

在绑定到退出全屏的事件中。显然 Safari 不喜欢这样。现在它已被删除，它再次在 Safari 中正常工作。