fix(Screen): change screen dimmensions formula for mobiles quasarframework#12311 (quasarframework#12313)

Author: pdanpdan

ui/dev/src/pages/web-tests/screen-height.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="q-layout-padding bg-yellow">
+    <div v-for="i in 200" :key="i" class="text-subtitle2">Row {{ i }}</div>
+    <div class="fixed-center">{{ $q.screen.height }}</div>
+    <div class="fixed" style="left: 0; right: 0; height: 3px; background: red" :style="{ top: `${$q.screen.height - 5}px` }"/>
+  </div>
+</template>

ui/src/plugins/Screen.js

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 
-import { isSSR, fromSSR } from './Platform.js'
+import { isSSR, fromSSR, client } from './Platform.js'
 import { listenOpts, noop } from '../utils/event.js'
 import debounce from '../utils/debounce.js'
 
@@ -48,8 +48,11 @@ export default {
     }
 
     const { visualViewport } = window
-    const getSize = visualViewport === void 0
-      ? () => [ window.innerWidth, window.innerHeight ]
+    const getSize = visualViewport === void 0 || client.is.mobile === true
+      ? () => [
+        Math.max(window.innerWidth, document.scrollingElement.clientWidth),
+        Math.max(window.innerHeight, document.scrollingElement.clientHeight)
+      ]
       : () => [
         visualViewport.width * visualViewport.scale + window.innerWidth - document.scrollingElement.clientWidth,
         visualViewport.height * visualViewport.scale + window.innerHeight - document.scrollingElement.clientHeight