react-native-webview ：对于 iOS 文本太小答案

【问题标题】：react-native-webview : For iOS text too smallreact-native-webview ：对于 iOS 文本太小
【发布时间】：2019-07-26 14:24:11
【问题描述】：

我使用react-native-webview 来呈现 HTML 文本。但是 iOS 中的文字太小了，而在 android 中却是完美的。

以下是代码行：

import { WebView } from "react-native-webview";


render() {
  <WebView
        originWhitelist={['*']}
        source={{ html: '<p>This is a static HTML source!</p>' }}
  />
}

附上截图：

【问题讨论】：

相关：stackoverflow.com/questions/57752837/…
有趣的是，我的 iOS 字体很棒，我的 Droid 字体也很大！
@OneInaMillionApps 你找到解决方案了吗？

标签： react-native react-native-ios react-native-webview

【解决方案1】：

使用视口元标记控制移动浏览器的布局

<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>' }}
/>

链接：https://github.com/react-native-community/react-native-webview/issues/386

【讨论】：

根据我的经验，HTML 代码应该具有有效的 DOCTYPE 和 html 结构才能在 web 视图中呈现。如果您的内容只是“正文部分”，请使用带有 DOCTYPE 注释的 html 和正文结构将其包装以正确呈现。喜欢<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1.0"></head><body>${yourHtml}</body></html>
感谢您的帮助和帮助 :-) 在 WebView 中将内容正文内容包裹在标题周围可以防止其在正文中进行修改 :-)

【解决方案2】：

除了<meta>，您还可以将<style> 标签添加到<head> 部分以缩放字体：

<style>
    body { font-size: 120%; word-wrap: break-word; overflow-wrap: break-word; }
</style>

【讨论】：