diff --git a/core/src/components/app/app.tsx b/core/src/components/app/app.tsx
index ff99bfef90..44a47d3457 100644
--- a/core/src/components/app/app.tsx
+++ b/core/src/components/app/app.tsx
@@ -1,7 +1,7 @@
 import { Component, Element, Prop, QueueApi } from '@stencil/core';
 
 import { Config, Mode } from '../../interface';
-import { isDevice, isHybrid, needInputShims } from '../../utils/platform';
+import { isDevice, isHybrid, isStandaloneMode, needInputShims } from '../../utils/platform';
 import { createThemedClasses } from '../../utils/theme';
 
 @Component({
@@ -35,7 +35,8 @@ export class App {
 
   hostData() {
     const hybrid = isHybrid(this.win);
-    const statusbarPadding = this.config.get('statusbarPadding', hybrid);
+    const isStandalone = isStandaloneMode(this.win);
+    const statusbarPadding = this.config.get('statusbarPadding', hybrid || isStandalone);
 
     return {
       class: {
@@ -43,6 +44,7 @@ export class App {
 
         'is-device': this.isDevice,
         'is-hydrid': hybrid,
+        'is-standalone': isStandalone,
         'statusbar-padding': statusbarPadding
       }
     };
diff --git a/core/src/utils/platform.ts b/core/src/utils/platform.ts
index 123da26ff9..90d562f865 100644
--- a/core/src/utils/platform.ts
+++ b/core/src/utils/platform.ts
@@ -57,6 +57,10 @@ export function isElectron(win: Window): boolean {
   return testUserAgent(win, /electron/);
 }
 
+export function isStandaloneMode(win: Window): boolean {
+  return win.matchMedia('(display-mode: standalone)').matches;
+}
+
 export function needInputShims(win: Window) {
   return isIOS(win) && isDevice(win);
 }