Hi, I am using V6 (latest) and tested on a S20 Android phone. I noticed something odd. When I view the app in a web browser, everything looks as expected (either chrome or FF on desktop or chrome on the phone). But as an app, the font’s and icons appear larger. This is only a problem because text and icons no longer line up. I am attaching a few screen images. 2 are on the app and the 3rd is on the phone web browser for comparison. I don’t see anything different in the html.
After checking the debugger,
body: font-size: app 18.2px, browser 16px
.f7-icons: font-size: 36.4px, browser 28px
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">
Build with Cordova android 9.1.0
Update
The problem was the phone system font size was set just above “average”. When I set it to average, the icons and font started looking good again. This is a new phone and I guess the default is now a little larger on Android. I don’t understand why the spacing was not increased proportionally (spaces, line-height etc.). Is there anything that can be done to prevent this from happening? When I test in a browser and increase the font (ctl-+), everything gets proportionally larger.