diff --git a/app/assets/javascripts/discourse/app/components/composer-body.js b/app/assets/javascripts/discourse/app/components/composer-body.js
index 9ee19855e48..15604628423 100644
--- a/app/assets/javascripts/discourse/app/components/composer-body.js
+++ b/app/assets/javascripts/discourse/app/components/composer-body.js
@@ -89,11 +89,6 @@ export default Component.extend(KeyEnterEscape, {
           passive: false,
         });
     });
-
-    if (this._visualViewportResizing()) {
-      this.viewportResize();
-      window.visualViewport.addEventListener("resize", this.viewportResize);
-    }
   },
 
   @bind
@@ -170,42 +165,9 @@ export default Component.extend(KeyEnterEscape, {
     throttle(this, this.performDragHandler, event, THROTTLE_RATE);
   },
 
-  @bind
-  viewportResize() {
-    const composerVH = window.visualViewport.height * 0.01,
-      doc = document.documentElement;
-
-    doc.style.setProperty("--composer-vh", `${composerVH}px`);
-
-    const viewportWindowDiff =
-      this.windowInnerHeight - window.visualViewport.height;
-
-    viewportWindowDiff > 0
-      ? doc.classList.add("keyboard-visible")
-      : doc.classList.remove("keyboard-visible");
-
-    // adds bottom padding when using a hardware keyboard and the accessory bar is visible
-    // accessory bar height is 55px, using 75 allows a small buffer
-    doc.style.setProperty(
-      "--composer-ipad-padding",
-      `${viewportWindowDiff < 75 ? viewportWindowDiff : 0}px`
-    );
-  },
-
-  _visualViewportResizing() {
-    return (
-      (this.capabilities.isIpadOS || this.site.mobileView) &&
-      window.visualViewport !== undefined
-    );
-  },
-
   didInsertElement() {
     this._super(...arguments);
 
-    if (this._visualViewportResizing()) {
-      this.set("windowInnerHeight", window.innerHeight);
-    }
-
     this.setupComposerResizeEvents();
 
     const triggerOpen = () => {
@@ -225,10 +187,6 @@ export default Component.extend(KeyEnterEscape, {
   willDestroyElement() {
     this._super(...arguments);
 
-    if (this._visualViewportResizing()) {
-      window.visualViewport.removeEventListener("resize", this.viewportResize);
-    }
-
     START_DRAG_EVENTS.forEach((startDragEvent) => {
       this.element
         .querySelector(".grippie")
diff --git a/app/assets/javascripts/discourse/app/initializers/mobile-keyboard.js b/app/assets/javascripts/discourse/app/initializers/mobile-keyboard.js
new file mode 100644
index 00000000000..72c343511d1
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/initializers/mobile-keyboard.js
@@ -0,0 +1,47 @@
+import { bind } from "discourse-common/utils/decorators";
+
+export default {
+  name: "mobile-keyboard",
+  after: "mobile",
+
+  initialize(container) {
+    const site = container.lookup("service:site");
+    const capabilities = container.lookup("capabilities:main");
+
+    if (!capabilities.isIpadOS && !site.mobileView) {
+      return;
+    }
+
+    if (!window.visualViewport) {
+      return;
+    }
+
+    // TODO: Handle device rotation?
+    this.windowInnerHeight = window.innerHeight;
+
+    this.onViewportResize();
+    window.visualViewport.addEventListener("resize", this.onViewportResize);
+  },
+
+  teardown() {
+    window.visualViewport.removeEventListener("resize", this.onViewportResize);
+  },
+
+  @bind
+  onViewportResize() {
+    const composerVH = window.visualViewport.height * 0.01;
+    const doc = document.documentElement;
+
+    doc.style.setProperty("--composer-vh", `${composerVH}px`);
+    const heightDiff = this.windowInnerHeight - window.visualViewport.height;
+
+    doc.classList.toggle("keyboard-visible", heightDiff > 0);
+
+    // Add bottom padding when using a hardware keyboard and the accessory bar
+    // is visible accessory bar height is 55px, using 75 allows a small buffer
+    doc.style.setProperty(
+      "--composer-ipad-padding",
+      `${heightDiff < 75 ? heightDiff : 0}px`
+    );
+  },
+};