Allow for zoom in and out on iOS and Android devices

Question

I'm currently working on a web responsive website and having an issue zooming in and out on Android devices.

Even though it's a responsive app I want to support the pinch-in and out function in order to zoom in some images.

In the nuxt.js config file's meta, there is

{ 
  name: 'viewport', 
  content: 'width=device-width, 
  initial-scale=1, 
  minimum-scale=1, 
  user-scalable=no, 
  viewport-fit=cover'
}

and after did some research, I found the user-scalable=no makes disable the zooming in and out.

When I test on iOS devices and used Safari and Chrome, I can zoom in and out an image with pinch in/out action (which is perfect but not sure why...), however, I was not able to zoom in and out when I test on Android devices.

So my questions are

1. why I can zoom in and out on iOS devices and cannot Android devices with the code above
2. how can I enable zoom in and out on Android devices.

Answer 1

This post should have several answers on how to disable the zoom on iOS devices: Disable Auto Zoom in Input "Text" tag - Safari on iPhone
The most common trick is probably

font-size: 16px;

As of why the difference in behavior, this is probably because we do have some properties applying to Android devices and not to iOS ones. Same as some browsers differences, think about the good old days of patching IE for it to look like the others. Here, the bad boy is probably iOS and therefore, it requires some additional configuration.

---

As for your issue, if you want to enable the zoom on Android devices, why do you not remove user-scalable=no? The default head of a nuxt.config.js file is looking like this

export default {
  head: {
    meta: [{ name: 'viewport', content: 'width=device-width, initial-scale=1' }],
  }
}

There is no zoom disable setting in here, and therefore it works fine on any device to zoom. Doesn't it?