react-nativereact-native-iosreact-native-webview

react-native-webview : For iOS text too small

I have used react-native-webview for rendering HTML text. But text is too small in iOS while in android it is perfect.

Here are lines of code : 

import { WebView } from "react-native-webview";


render() {
  <WebView
        originWhitelist={['*']}
        source={{ html: '<p>This is a static HTML source!</p>' }}
  />
}

Attaching screenshot :

enter image description here

Solution

  • Using the viewport meta tag to control layout on mobile browsers

    <meta name="viewport" content="width=device-width, initial-scale=1" />

<WebView
      originWhitelist={['*']}
      source={{ html: '<html><head><meta name="viewport" content="width=device-width, initial-scale=1.0" /></head><body><p>This is a static HTML source!</p></body></html>' }}
/>

    link :https://github.com/react-native-community/react-native-webview/issues/386