react-native-webview : For iOS text too small

Question

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 :

Related: https://stackoverflow.com/questions/57752837/webview-flutter-font-size-is-too-small-in-ios/57752878#57752878 — Blasanka, Sep 02 '19 at 07:30

Payal Maniyar · Accepted Answer · 2019-03-05T07:58:53.740

71

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

edited Mar 05 '19 at 07:58

answered Mar 05 '19 at 07:54

Payal Maniyar

4,293
3
25
51

6

According my experiences HTML code should have valid DOCTYPE and html strcuture to render in web-view. If your content just "the body part", wrap it with html and body structure with DOCTYPE annotation to render correctly. Like ` ${yourHtml}` – Orhaan May 15 '19 at 06:55
thank you this works and helped :-) also wrapping content body content around headers in the WebView prevents its modification within body :-) – CeDeROM Sep 13 '21 at 02:19

score 2 · Answer 2 · answered Nov 06 '19 at 13:10

2

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>

answered Nov 06 '19 at 13:10

Serhii Harbovskyi

309
1
7

score 1 · Answer 3 · answered Apr 13 '23 at 06:29

This works pretty fine to me,

    <!DOCTYPE html>
    <html>
      <head>
        <meta name="viewport" content="width=device-width" initial-scale="1.00" maximum-scale="1.0">
      </head>
      <body>
        <p style='text-align:center;'>
           Hello World!
       </p>
      </body>
    </html>

Works in both Android and IOS

react-native-webview : For iOS text too small

3 Answers3