Menu
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 :
443
The WebView has default styles. If you want to set height, you also need to add flex: 0 , as stated in the documentation: Please note that there are default styles (example: you need to add flex: 0 to the style if you want to use height property).
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
80
Additionally to the <meta> you can add <style> tag into the <head> section to scale the font:
<style> body { font-size: 120%; word-wrap: break-word; overflow-wrap: break-word; } </style> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With