时间戳

首页 > 解决方案 > IOS中Webview Flutter字体太小

android - IOS中Webview 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())),
),

标签： androidiosflutterdart

解决方案

原因是，你只用html元素包裹。您必须指定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-->

推荐阅读