An Ionic cordova application I’m developing does not show the same size on the browser as on the android phone. On the Android phone it is larger, and shows less lines on the page. See the following two images - one is the app running in an Android emulator for Pixel 3, and the other is running in the browser. The browser version is as expected and has more of a gap after the video items. The Pixel 3 emulator has a lower height than expected and the same behaviour is occurring on real android phones. The Pixel 3 emulator is listed as having a resolution of 1080 x 2160, however when I do a chrome://inspect it shows a webview of size 1080x1854.
I have tried using the phonegap-mobile-accessibility plugin to set font size to 100% and to set usePreferredTextZoom to false but that has not worked.
Versions listed below, however this behaviour seems to occur for many different versions, in different applications and for Capacitor as well as Cordova. At the beginning of the development it was working correctly - I am stumped as to what has changed. Any help would be appreciated.
ionic info
Ionic:
ionic (Ionic CLI) : 4.12.0 (C:\Users\Owner\AppData\Roaming\npm\node_modules\ionic) Ionic Framework : @ionic/angular 5.6.4 @angular-devkit/build-angular : 0.1102.9 @angular-devkit/schematics : 11.2.9 @angular/cli : 11.2.9 @ionic/angular-toolkit : 3.1.1
Cordova:
cordova (Cordova CLI) : 10.0.0 Cordova Platforms : android 10.0.1 Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 5.0.0, (and 1 other plugins)
System:
NodeJS : v16.4.1 (C:\Program Files\nodejs\node.exe) npm : 7.18.1 OS : Windows 10
cordova-plugin-ionic-keyboard 2.2.0 “cordova-plugin-ionic-keyboard” cordova-plugin-ionic-webview 5.0.0 “cordova-plugin-ionic-webview” cordova-plugin-splashscreen 5.0.2 “Splashscreen” es6-promise-plugin 4.2.2 “Promise”
