Adding CSS styling to React Native WebView

Question

So I am a bit stumped on this ... I\'m using a WebView in a portion of our app, the reason for the WebView is because we are pulling from an API endpoint that returns to us an H

Answer 1

I recently experienced the same issue. It was only occurring for me on iOS, not Android.

The weirdest part is the inconsistency in replication. I couldn't find any pattern to when the WebView content would be sized differently. Identical HTML would result in font size that was sometimes normal, but other times very tiny.

My solution came from a (RN 0.47) WebView prop:

scalesPageToFit?: bool

Boolean that controls whether the web content is scaled to fit the view and enables the user to change the scale. The default value is true.

I tried setting scalesPageToFit to false, and voilà, the page stopped scaling down:

The only problem is that this caused my content to be scaled larger than the WebView's container on Android. To fix this, I simply set the scalesPageToFit prop conditionally, based on platform:

Worked like a charm for me!