IOS中的Webview Flutter字体大小太小

小编典典

IOS中的Webview Flutter字体大小太小

flutter

我有需要在webview中呈现以显示HTML文本编辑器样式的内容的html代码。唯一的选择是使用webview。因此，我实现了我的API以发送响应特定<div>元素，并使用官方flutter
webview进行显示。Android可以正确显示，并且IOS字体很小（甚至无法读取）。我做错了什么？

相关代码段：

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())),
),

阅读 1128

2020-08-13

共1个答案

小编典典

原因是，您只包装了htmlelement。您必须指定meta标签以在IOS设备中进行响应。为此，还必须添加head如下元素：

  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>"""));

在 我看来 ：

Android足够聪明，无需<meta>视口就能识别html代码，但IOS不能。您必须将视口明确设置为移动设备，就像使Web应用程序响应移动设备一样。

最好包装<!DOCTYPE html>注释以正确呈现。

这正是您的代码所需要的：

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

2020-08-13