diff --git a/src/core/features/settings/services/settings-helper.ts b/src/core/features/settings/services/settings-helper.ts
index ee07046d5..51e7a9c1f 100644
--- a/src/core/features/settings/services/settings-helper.ts
+++ b/src/core/features/settings/services/settings-helper.ts
@@ -388,8 +388,8 @@ export class CoreSettingsHelperProvider {
      */
     applyZoomLevel(zoomLevel: CoreZoomLevel): void {
         const zoom = CoreConstants.CONFIG.zoomlevels[zoomLevel];
-        // @todo MOBILE-3790 non-standard property, doesn't work everywhere.
-        document.documentElement.style.zoom = zoom + '%';
+
+        document.documentElement.style.setProperty('--zoom-level', zoom + '%');
     }
 
     /**
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index 90437ec03..c040c18d3 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -1,7 +1,19 @@
 @import "./globals.scss";
 
+html.force-safe-area-margins {
+    --ion-safe-area-left: 40px;
+    --ion-safe-area-right: 40px;
+    --ion-safe-area-top: 40px;
+    --ion-safe-area-bottom: 40px;
+}
+
+// @todo MOBILE-3790 non-standard property, doesn't work everywhere.
+html {
+    zoom: var(--zoom-level);
+}
+
 body {
-    -webkit-text-size-adjust: auto;
+    -webkit-text-size-adjust: var(--zoom-level);
 }
 
 // Common styles.
diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss
index 1f56a2b39..fb0ad53ec 100644
--- a/src/theme/theme.light.scss
+++ b/src/theme/theme.light.scss
@@ -61,6 +61,7 @@
     --a11y-min-target-size: 44px;
     --a11y-focus-color: var(--primary);
     --a11y-focus-width: 2px;
+    --zoom-level: 100%;
 
     --module-icon-size: 24px;