Allow Zooming

Zooming and scaling in an Ionic application is disabled by default which is typical of mobile applications. However when an Ionic application is also deployed to web the expectation is that it can be zoomed/scaled (usually by two fingers sliding away from each other).

On a Mac use CMD + and - to zoom in and out. On Windows use CTRL + and -.

This feature is important for users with low vision who rely on screen magnifiers.

Before

<meta name="viewport" content="minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, initial-scale=1.0, viewport-fit=cover, width=device-width" />

The above example in index.html has the scale fixed to 1.0 and prevents scaling with user-scalable set to no.

After

<meta name="viewport" content="minimum-scale=1.0, maximum-scale=5.0, initial-scale=1.0, user-scalable=yes, viewport-fit=cover, width=device-width" />

The above example allows scaling between 1.0 and 5.0 and allows the user to scale by setting user-scalable set to yes.

note

If your application targets native and web then consider programmatically setting scaling on by default for web and off for native. Allowing scaling to be enabled on native as an optional feature can also improve accessibility for users with low vision.