ブラウザのトラックパッドは、ピンチズームジェスチャー（Ctrl+ホイールも同様）をWheelEventとして合成し、その際ctrlKey: trueを自動付与するという慣例がある。Miro等のキャンバスUIではpinch=ズーム、二本指スクロール=パンという操作体系をこのctrlKeyフラグだけで実装できる。

適用条件: キャンバス型UI（マインドマップ・ホワイトボード・図面エディタ等）で、トラックパッドの自然なパン/ズーム操作感を実装したい場合。

対処方法: onWheelハンドラでe.ctrlKeyを判定し、trueならカーソル位置を中心にしたズーム、falseならパンとして処理を分岐する。ピンチは連続した小さなdeltaYのストリームとして届くため、固定倍率の段階ズーム（例: 常時x1.08）ではなくMath.exp(-deltaY * k)のようなdeltaY比例の連続ズームにすると滑らかになる。二本指スクロールはdeltaX/deltaYをそのままビューポートの平行移動量として使う。

確認方法: 実機トラックパッドがなくても、PlaywrightのChrome DevTools Protocolセッション（page.context().newCDPSession(page)）からInput.dispatchMouseEventをtype: 'mouseWheel'で呼び、deltaX/deltaYとmodifiers（Ctrlは2）を指定すると、ctrlKey付き/なしの両パターンをプログラマティックに再現できる。ズーム式がMath.exp(-deltaY*k)なら、送信したdeltaYから期待値を逆算して実際のscaleと比較すれば、式の実装正確性を数値で検証できる（ブラウザUI目視に頼らない）。

教訓: 実トラックパッドを持たない開発環境でも、CDPのInput.dispatchMouseEventはマウスホイール・修飾キー付きイベントを実デバイスイベントとして注入できるため、「実機の確認は他者に任せるが、ロジック自体の正しさは自分で数値検証しておきたい」というケースで有効。