react-native-webview:iOS 文本太小
react-native-webview : For iOS text too small
我使用 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>' }}
/>
}
附上截图:
使用视口元标记控制移动浏览器上的布局
<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>' }}
/>
link :https://github.com/react-native-community/react-native-webview/issues/386
除 <meta>
之外,您还可以将 <style>
标记添加到 <head>
部分以缩放字体:
<style>
body { font-size: 120%; word-wrap: break-word; overflow-wrap: break-word; }
</style>
我使用 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>' }}
/>
}
附上截图:
使用视口元标记控制移动浏览器上的布局
<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>' }}
/>
link :https://github.com/react-native-community/react-native-webview/issues/386
除 <meta>
之外,您还可以将 <style>
标记添加到 <head>
部分以缩放字体:
<style>
body { font-size: 120%; word-wrap: break-word; overflow-wrap: break-word; }
</style>