22

我已经用于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>' }}
  />
}

附上截图:

在此处输入图像描述

4

2 回答 2

63

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

<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

于 2019-03-05T07:54:32.667 回答
1

此外,<meta>您还可以在该部分中添加<style>标签<head>以缩放字体:

<style>
    body { font-size: 120%; word-wrap: break-word; overflow-wrap: break-word; }
</style>
于 2019-11-06T13:10:00.230 回答