IOS中的Webview Flutter字体大小太小 [英] Webview Flutter font size is too small in IOS
问题描述
我有需要在webview中呈现以显示HTML文本编辑器样式的内容的html代码。唯一的选择是使用webview。因此，我实现了API以发送特定于< div> 元素的响应，并使用官方的浮动的Webview 。 Android可以正确显示，并且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?
相关代码段：
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())),
),
推荐答案
原因是，您只用 html 元素包装，必须指定 meta 标签以在IOS设备中响应。为此，还必须添加 head 元素，如下所示：
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>"""));
我认为：
Android足够聪明，可以在没有< meta> 视口的情况下识别html代码，但是IOS不能识别。
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.
最好包装<！DOCTYPE html> 注释才能正确呈现。
It's better to wrap <!DOCTYPE html> annotation to render correctly.
这正是您需要的代码：
<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1.0"></head><!--rest of your html-->
这篇关于IOS中的Webview Flutter字体大小太小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
