Pinch to Zoom seems like it no longer works as it should (actually, can’t remember it working ever).
It is very frustrating when trying to double tap and it zooms instead. I built my layouts so zooming is not needed. I tried searching, but haven’t found a solution to this issue.
Looks like there is a bug and the “viewport” meta tag changes after the home assistant layout is loaded so the disable “Pinch To Zoom” setting only works when you activate the setting in the app and go back to home assistant. After restarting the app, it no longer applies the “Pinch To Zoom” setting correctly.
This is what I’ve done to automatically disable pinch-to-zoom on all mobile devices:
- Add a javascript module to the configuration.yaml
frontend:
extra_module_url:
- /local/start.js?v=1.0.0
- Create the file “start.js” in the “www” folder with the following contents. This will automatically override the viewport setting and disable Zoom, even if it has been changed by HomeAssistant:
const viewport = "width=device-width, initial-scale=1.0,viewport-fit=cover,user-scalable=no";
const overrideZoom = () => {
// we know that the HA frontend creates this meta tag, so we can be lazy
const element = document.querySelector('meta[name="viewport"]');
if (element === null) {
return;
}
console.log(`viewport ${element['content']}`);
if (element['content'] !== viewport) {
element['content'] = viewport;
console.log(`adjusted viewport to ${element['content']}`);
}
};
overrideZoom()
// Create an observer instance linked to the callback function
var observer = new MutationObserver(function(mutationsList) {
for(var mutation of mutationsList) {
if (mutation.type == 'attributes' && mutation.target.content !== viewport) {
console.log('The ' + mutation.attributeName + ' attribute was modified.');
overrideZoom()
}
}
});
// Start observing the target node for configured mutations
observer.observe(document.querySelector('meta[name="viewport"]'), { attributes: true });
- Restart HA to apply changes.