javascript - 用户浏览器缩放时如何处理覆盖

Question

我的网站上有一个叠加层，用户单击按钮时会激活该叠加层。

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

这对于一些视障用户来说是不可取的。有谁知道我如何动态检测某些东西，也许检测并重定向到静态页面中包含的表单。

Answer 1

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

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

编辑

Here is a fiddle它适用于浏览器的缩放以及调整窗口大小。