I’m using tabbed views with a toolbar with icons (as the framewor7/vue example) - the text under the icons in the footer toolbar menu on android phones is appearing larger when compared to the app on an iOS phone - is there a setting I’ve missed making sure android phones render with the smaller font?
Maybe you can add screenshots?
when viewing on a desktop and you shrink the window down, the toolbar menu titles become abbreviated with three dots. This is how the toolbar menu looks like on an Android phone for me.
But if you reload the app in the desktop browser at the right screen size, the toolbar menu titles are rendered in a smaller font, this is how it looks on an Apple phone for me.
I think it’s not rendering the mobile styles on the Android phone - is there a way to force the styles to always be the mobile version?
I can see the nice mobile rendering has the following (when in a desktop browser):
<html class="ios device-pixel-ratio-3 device-retina device-ios device-ios-11 device-ios-11-0 device-ios-gt-10 device-ios-gt-9 device-ios-gt-8 device-ios-gt-7 device-ios-gt-6 device-iphone-x">
and desktop is:
<html class="md device-pixel-ratio-1 device-desktop device-windows with-modal-loginscreen">
and my Android is this (which looks like desktop above, and not the iOS rendering):
<html class="md device-pixel-ratio-4 device-retina device-android device-android-7 device-android-7-0 device-cordova">
The difference in rendering seems to be the “md” and “ios” in the class.
This is ios and md are themes. md theme must be used on Android. If you have large text in toolbar buttons, you can tweak its styles to make font smaller for md theme