How to use “viewport-fit=cover” and “maximum-scale=1” without disabling zoom on Android

Question

I’ve been using the following viewport meta tag on my site:

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, viewport-fit=cover" />

On iPhone, this gives me the exact behavior that I want:

• maximum-scale=1 prevents Safari from zooming in when a text field is focused
• viewport-fit=cover removes Safari's left and right padding on the iPhone X in landscape, so the background color and images extend all the way to the edges
• The user can still manually pinch-to-zoom if they want, since iOS always allows it, regardless of any properties in the meta tag that would otherwise disable it

But on Android, maximum-scale=1 and viewport-fit=cover prevent zooming entirely, and the only way I’ve found to avoid that is to just remove both properties. But then I lose the benefits of including them on the iPhone as well.

Is there any way I can keep both of these properties in my meta tag but also still allow manual pinch-to-zoom on Android?

Answer 1

You should have been able to achieve what you were looking for by modifying the maximum-scale to something at least above 3.0. Having it as a max of one doesn't allow for any zoom in.

Maximum-scale relates to zoom in and minimum to zoom out from my understanding.