Question

我有WebView显示的内容不受我控制。 WebView内容是文件的预览，例如PowerPoint文档，PDF文件，Word文档等。

当用户更改其设备上的字体大小（设置 - ＆gt;辅助功能 - >字体大小）时，WebView会使用此调整后的字体大小。这导致WebView内容的布局错误，并且不再按设计对齐。一个例子是在我的PowerPoint演示文稿预览中，文本现在已经放大，因此它覆盖了文本右侧的图表，其他文本则从幻灯片的边缘开始。

如何让WebView完全忽略任何系统字体设置，并且只使用HTML / CSS中指定的字体大小来显示WebView中的内容？

我已经看到很多关于堆栈溢出的评论，关于如何将WebView中的字体设置为固定大小，例如：

webView.getSettings().setTextSize(WebSettings.TextSize.NORMAL); // Deprecated
webView.getSettings().setTextZoom(100);

但我不想这样做。我希望字体大小由WebView中的HTML / CSS确定，我永远不会知道WebView的内容可以是任何值。

Answer 1

“设置”中的字体大小设置会影响WebView的textZoom属性。请注意，将此属性设置为最小文本时，它将在85左右。在最大文本设置上，该值将在130左右。附加调试器并检查webView.getSettings().getTextZoom()值时可以找到这些值

仅使用 webView.getSettings().setTextZoom(100);设置会将其强制恢复为100，这又是标准值。这是你可能期望的。请尝试仅使用此语句，而无需设置textSize。

（如果这不起作用，请提供可重复的示例。加载（powerpoint）文件的预览时，大文本设置显示不正确。）

Answer 2

您可以在 textZoom 属性中进行设置。

在 Android 上，textZoom 如果未定义，则遵循系统字体缩放，因此，textZoom={100} 会禁用系统字体缩放以缩放 Web 视图文本。来自WebView docs：

<块引用>

如果用户在 Android 系统中设置了自定义字体大小，WebView 中的站点界面会出现不合需要的比例。

当设置标准的 textZoom (100) 参数大小时，这种不良影响就会消失。

<WebView textZoom={100} />

但是设置最大比例通常比完全禁用它更好

这种缩放对用户来说通常不是不受欢迎的：这通常是他们需要能够阅读的。我们不应在绝对必要的情况下覆盖用户可访问性设置。

最好在 Web 视图布局中断之前弄清楚您可以允许的最大字体缩放比例，然后将其设置为最大值。 WebView 中没有 <Text> 的 maxFontSizeMultiplier 属性的直接等价物，但是您可以像这样获得与 maxFontSizeMultiplier 相同的行为：

import { PixelRatio } from 'react-native';

const maxTextZoom = 150; // Experiment and find the max you can allow here
const minTextZoom = 90; // You might not need this

export const SomeComponent = ({ ...webViewProps }) => {
  const textZoom = Math.max(minTextZoom,
    Math.min(maxTextZoom, PixelRatio.getFontScale() * 100)
  );

  return (
    <WebView textZoom={textZoom} {...webViewProps} />
  )
}

WebView停止使用设备字体设置并使用HTML中指定的样式

2 个答案:

但是设置最大比例通常比完全禁用它更好