The correct CSS method of getting uniform font sizes in the web views of Android and iOS devices of varying pixel ratios?

Question

I'm tasked with building a simple HTML template with associated CSS styles that gets shown in an embedded web view of an application running on both Android and iOS. I'm having massive issues with font sizing on high-DPI devices: I have not found a way to get the fonts to scale to a reasonably consistent final rendered size on all the devices. I'm very much not aiming for perfectly uniform sizing here, just that the text wouldn't be either microscopic or massive on any of them.

I'm mainly a backend guy with very occasional forays into frontend work, but I've never had to deal with this wide an array of mobile viewports before. I've tried a lot of things based on googling for solutions (rem, vw/vh, media queries, etc.), but none of them have worked right—the text sizes vary between microscopic to massive with little rhyme or reason. I'm sure I've had the right ingredients during my attempts, but I've been unable to combine them correctly.

My needs, in short: regardless of whether it's an Android WebView or an iOS WKWebView, regardless of what the pixel ratio on the device is, I want the text to show up in such a way that it's roughly the same final rendered size on all devices.

This has to be a solved problem, right? Could someone just tell me what the correct CSS incantations are?

Answer 1

Unfortunately, there seems to be no way to voluntarily mark my question as "invalid" or "redundant", because this is not an answer as such.

The problem turned out to be that I didn't have the <meta name="viewport" content="width=device-width" /> header in my HTML. Once I added that and removed all of my pixel ratio-specific media query hacks that preceded it, the HTML looked reasonable on every device we tested it on.