The solution using a meta-tag did not work for me (tested on Chrome win10 and safari IOS 14.3), and I also believe that the concerns regarding accessibility, as mentioned by Jack and others, should be honored.
My solution is to disable zooming only on elements that are damaged by the default zoom.
I did this by registering event listeners for zoom-gestures and using event.preventDefault() to suppress the browsers default zoom-behavior.
This needs to be done with several events (touch gestures, mouse wheel and keys). The following snippet is an example for the mouse wheel and pinch gestures on touchpads:
noteSheetCanvas.addEventListener("wheel", e => {
// suppress browsers default zoom-behavior:
e.preventDefault();
// execution my own custom zooming-behavior:
if (e.deltaY > 0) {
this._zoom(1);
} else {
this._zoom(-1);
}
});
How to detect touch gestures is described here: https://stackoverflow.com/a/11183333/1134856
I used this to keep the standard zooming behavior for most parts of my application and to define custom zooming-behavior on a canvas-element.