How to handle Ionic layout issues when keyboard opens on devices with Display Zoom or Large Text enabled?

We’re facing a layout issue in our Ionic (Angular + Cordova) app.
The problem mainly happens on iOS devices where Display Zoom or Large Text (Accessibility settings) are enabled.

When the native keyboard opens, parts of the layout shift or overlap incorrectly. This doesn’t happen with default settings, only when system scaling is applied.

What we tried

• Adjusting <meta viewport> tags (initial-scale, user-scalable, maximum-scale).

• Tweaks in config.xml and platform-specific preferences.

• JS-based detection (checking window.innerWidth vs screen.width, devicePixelRatio).

Despite these attempts, we found that system-level scaling (Display Zoom, Large Text) isn’t something we can control.

Is there any recommended approach or workaround in Ionic/Angular to:

1. Prevent or reduce layout breaks when keyboard opens under these accessibility settings?

2. Programmatically detect Display Zoom / Large Text?

3. Apply CSS strategies (e.g., forcing minimum font-size on inputs, safe-area insets, flexible containers) to keep layout stable?

• Ionic Framework v5

• Angular 11

• Target platforms: iOS & Android

1 post - 1 participant

Read full topic