Javascript 如何仅在两个触摸位于同一窗格中时启用收缩缩放

我有一个带有几个窗格的页面（请参见下面的快照1）。我只想将收缩缩放限制为特定窗格（例如A、B）

目前，我使用css触摸操作控制收缩缩放，用户可缩放=否。
但我不确定我是否做对了。这就是我要做的。我,

• 将user scalable=no放在html页面的顶部（请参见代码段1）
• 在要禁用收缩缩放的div中填充“touch action:none”
• 在要启用收缩缩放的div中填充“触摸操作：收缩缩放”

但我经常会发现另一种边缘情况，即在不应该的地方启用缩放功能。

此外，我想仅当两个触摸位于同一窗格中时才将缩放限制为（例如A）

当前，如果一个触摸屏位于窗格A中，另一个触摸屏位于窗格B中，则窗格A和窗格B都将缩放。
这种情况发生在显示区域较小的设备中，用户在按住和缩放时多次触摸两个窗格。
这会导致两个窗格都变焦，这会让用户感到困惑

我的问题是：

除了特定的div之外，什么是正确的方法来禁用任何地方的收缩缩放

对于启用缩放的区域，如何仅在两个手指开始接触同一区域（div）时启用缩放

谢谢

---

快照1-具有多个窗格的图像

snippet1-使用css触摸操作控制收缩缩放，用户可缩放=否

cat index.html
...
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
...

解决方案是用于检测和丢弃触摸并非都在同一DOM元素中开始的情况

cat main.css
...
#navbar1{
    touch-action: none;
}
...