javascript - 调整窗口大小时禁用调整特定 div 的大小

Question

我有一个包含主屏幕和版本弹出窗口的应用程序。两者都是 div，弹出 div 有更大的 z-index，并且覆盖整个屏幕:

<div id="my-main-screen">
  <!-- ... -->
</div>
<div id="my-popup" style="z-index: 1; width: 100%; height:100%; top:0px; left:0px">
  <!-- ... -->
</div>

我的问题如下:

• 在移动设备上，在我的弹出窗口中关注和关注文本字段会显示和隐藏虚拟键盘，这会触发 window 的 resize 事件。
• 调整大小也会调整主屏幕 div 的大小，这没用而且很慢，因为我的主屏幕相当复杂
• 结果是，在我的弹出窗口 div 中关注和关注文本字段感觉缓慢且 react 迟钝。

我尝试隐藏主屏幕 div。它在弹出窗口中时有效...但是当我关闭弹出窗口时，我必须再次使主屏幕可见，这与调整大小一样慢。

有没有办法只在主屏幕 div 上禁用调整大小而不隐藏它？

Answer 1

在黑暗中拍摄，但您可以尝试在视口(viewport)标签中将最大比例设置为 1，以使您的文档在移动设备上不缩放...

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">