Individual Font-size displayed differently on iOS + Android



I changed some of the CSS rules and checked the results with an iOS smartphone and an Android smartphone. I realized quickly that some of my CSS rules (e.g. for the font-size) is displayed differently on these devices.

When making the font-size smaller, it will be applied on iOS but ignored or missunderstood on Android.

E.g. I am using this rule:

video[src=""] + div .h5p-multichoice .h5p-feedback-text { font-size: 0.313em !important; }

This will be applied on iOS but when calling this Multiple-Choice task in the video on an Android smartphone it will be ignored and the font-size is displayed differently than on iOS. When I comment out this rule than it's okay on Android but not on iOS.

Any idea why this is happening? Or do you need some more information?

otacke's picture


I think this relates to different handling of font sizes across browser engines, but I assume that this recent code change is suppused to harmonize font sizing. It needs to be released however (as part of an update of the plugins). But you're overriding the stylesheets anyway, you can use the text-size-adjustment property yourself right away.