1

我在支持它的浏览器上使用 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 添加单独的类，因为我必须在后续调整大小时将其删除。

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

4

1 回答 1

0

Ok, so I did a mockup outside of my app with the same conditions (with none of the other code) and realized this was working in Safari in that test. I was using:

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

in an event bound to exiting full screen. Apparently Safari didn't like this. Now that that is removed, it works fine in Safari again.

于 2013-06-14T22:26:53.750 回答