Selectively disable mobile browser zoom on input focus

disable-zoom.js

// Disable mobile zoom on focus
{
  // Customise the selector value as necessary
  const selector  = '[data-nozoom]'
  const $viewport =
    document.querySelector('meta[name=viewport]')
    ??
    Object.assign(document.createElement('meta'), {name: 'viewport'})

  const $scale0 = Object.assign($viewport.cloneNode(), {content: 'user-scalable=0'})
  const $scale1 = Object.assign($viewport.cloneNode(), {content: 'user-scalable=1'})

  addEventListener('mousedown', async e => {
    if(!e.target.matches(selector))
      return

    $scale1.remove()
    document.head.append($scale0)

    await new Promise(done => setTimeout(done, 200))

    $scale0.remove()
    document.head.append($scale1)
  }, {
    passive: true
  })
}