How to prevent user zoom in a desktop web app?

Question

I am attempting to use HTML 5 technologies to create an application that runs in the Chrome browser on the desktop. One of my challenges is that there seems to be no way to do the equivalent of:

<meta name="viewport" content="width=device-height, user-scalable=no, maximum-scale=1, minimum-scale=1" />

on the desktop. I found an issue reported against chromium, but it appears to have been ignored.

To get a feel for the problem, visit maps.google.com in Chrome or Safari on a Mac, and do a pinch-zoom gesture. Instead of the map zooming in, as users would expect, the browser just creates a huge unusable mess.

Given that Google Maps and Chrome are developed by the same company, this is feeling like a fairly hopeless cause. But this seems like a pretty fundamental flaw in the whole "Web Application" concept. Creating a native experience is impossible if the browser won't even let you control something as basic as having your virtual viewport be the same size as your window.

Am I missing something?

Answer 1

I'm facing the same issues. I recently found this:

document.addEventListener('touchmove', function(event){
    if(event.touches.length >=2) {
        event.stopPropagation(); 
        event.preventDefault(); 
    }
});

But if the users acts really fast it still works. This is really annoying in a kiosk setting where a user does a pinch zoom on accident and has no idea what happened so the kiosk is just broken. I'll keep posting if I find a solution