fix(Screen): use viewport to get window size to avoid problems with z…

…oom/HiDPI #10120
quasarframework · Jan 29, 2022 · ad833d1 · ad833d1
1 parent 18aa885
commit ad833d1
Showing 1 changed file with 11 additions and 8 deletions.
diff --git a/ui/src/plugins/Screen.js b/ui/src/plugins/Screen.js
@@ -58,12 +58,19 @@ export default defineReactivePlugin({
       return
     }
 
+    const { visualViewport } = window
+    const target = visualViewport || window
+    const getSize = visualViewport === void 0
+      ? () => [ window.innerWidth, window.innerHeight ]
+      : () => [
+          visualViewport.width * visualViewport.scale + window.innerWidth - document.scrollingElement.clientWidth,
+          visualViewport.height * visualViewport.scale + window.innerHeight - document.scrollingElement.clientHeight
+        ]
+
     const classes = $q.config.screen !== void 0 && $q.config.screen.bodyClasses === true
 
     this.__update = force => {
-      const
-        w = window.innerWidth,
-        h = window.innerHeight
+      const [ w, h ] = getSize()
 
       if (h !== this.height) {
         this.height = h
@@ -121,11 +128,7 @@ export default defineReactivePlugin({
     }
 
     const start = () => {
-      const
-        style = getComputedStyle(document.body),
-        target = window.visualViewport !== void 0
-          ? window.visualViewport
-          : window
+      const style = getComputedStyle(document.body)
 
       // if css props available
       if (style.getPropertyValue('--q-size-sm')) {