当用户浏览器缩放时，如何处理覆盖

What to do with overlay when the user browser is zoomed

本文关键字：处理 覆盖 何处理 浏览器 用户 缩放      更新时间：2023-09-26

我的网站上有一个覆盖，当用户点击一个按钮时，它会被激活。

这个叠加看起来和工作都很好。直到用户决定缩放浏览器。当浏览器缩放时，因为覆盖使用位置:固定，它不会滚动，用户也无法到达或看到提交按钮。

对于一些视障用户来说，这是不可取的。有没有人知道我怎么能做检测的东西在飞行，也许检测和重定向到一个表单包含在一个静态页面，而不是

缩放具有与调整窗口大小类似的效果，所以我认为(如果我错了请纠正我)，但您可以使用resize()事件来更新覆盖的宽度和高度。请看下面的例子。

$(window).resize(function(){
   $('#Overlay').css({
      height:window.innerHeight,
      width:window.innerWidth
   )};
});

编辑

这是一个小提琴与浏览器的缩放以及调整窗口的大小。

我不确定我完全理解这里的问题，你有一个覆盖，但是覆盖…是不是覆盖了一些东西，这似乎是个问题?

无论如何，我通常这样做叠加:

.overlay {
    background-color: #777;
    background-color: rgba(0,0,0,0.7);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    /* This is important, maybe what you're after, the content you want 
       to show has to have a higher z-index than the overlay itself! */
    z-index: 99; 
}

z-index将允许您选择元素的堆叠顺序，也许这将解决您的问题。

相关文章：