0

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.
kissu
  • 40,416
  • 14
  • 65
  • 133
Yuuu
  • 715
  • 1
  • 9
  • 32

1 Answers1

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?

kissu
  • 40,416
  • 14
  • 65
  • 133
  • Thank you so much kissu! I was finally able to use the zoom function on Android devices by deleting user-scalable=no. However, that led me to a different issue. It automatically zooms in on iOS devices (which includes input text and the entire webpage etc)... I just want to use a pinch in function when a user taps an image and after the user enlarges the image. So I think I should set user-scalable to no to disable auto-zoom, but somehow I need to enable the pinch-in function only when the user taps the image... – Yuuu May 12 '21 at 08:00
  • Your issue is related to iOS devices here and hence, the article that I've linked is about this exact problem (on forms). Here, you want to disable the default auto-zoom of iOS while preserving the ability to zoom still. I do recommend to not remove `user-scalable=no` since this cannot be dynamic and that your goal is to allow the end users to zoom. – kissu May 12 '21 at 08:33