CODEWITHSUNDEEP
androidiosflutterdart
Blasanka
Blasanka

Reputation: 22437

Webview Flutter font size is too small in IOS

I have html code that I need to render in webview to display HTML text editor styled content. The one and only option is to use webview. So, I implemented my API to send response particular <div> element and displayed it using official flutter webview. Android its displaying correctly and IOS font sized is very small(can't even read). What I am doing wrong?

Relevant code snippet:

var contentBase64 = base64Encode(const Utf8Encoder()
      .convert(
      """<html>
          <body style='"margin: 0; padding: 0;'>
            <div>
              $htmlString //my html code snippet coming from API
            </div>
          </body>
        </html>"""));

//.....
WebView(
    initialUrl: 'data:text/html;base64,$contentBase64',
//  gestureRecognizers: Set()..add(Factory<VerticalDragGestureRecognizer>(()=>VerticalDragGestureRecognizer())),
),

Upvotes: 15

Views: 9608

Answers (1)

Blasanka
Blasanka

Reputation: 22437

The reason is, you only wrapped with html element. You have to specify meta tag to responsive in IOS devices. To do that you also have to add head element as below:

  var contentBase64 = base64Encode(const Utf8Encoder()
  .convert(
  """<!DOCTYPE html>
    <html>
      <head><meta name="viewport" content="width=device-width, initial-scale=1.0"></head>
      <body style='"margin: 0; padding: 0;'>
        <div>
          $htmlString
        </div>
      </body>
    </html>"""));

In my opinion:

Android is smart enough to identify html code without <meta> with viewport, but IOS does not. You have to explicitly set viewport to mobile device, like you make webapp responsive to mobile devices.

It's better to wrap <!DOCTYPE html> annotation to render correctly.

This is what you need exactly to your code:

<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1.0"></head><!--rest of your html-->

Upvotes: 41

Related Questions