如何使用 KitKat 在 WebView 中使文本适合屏幕（文本换行）答案

【问题标题】：How to make text fit to screen (text-wrap) in WebView with KitKat如何使用 KitKat 在 WebView 中使文本适合屏幕（文本换行）
【发布时间】：2013-11-07 12:18:56
【问题描述】：

我在使用 Android 4.4 的 WebView 中遇到问题。在 KitKat 之前，文本会自动适应 web 视图中的所有设备分辨率。但是今天它不再自动适应 4.4。我认为这是因为基于 Chromium 和 KitKat 的 WebView 的更新。

这是同一页面的 2 个屏幕截图：

One from Galaxy Nexus (Android 4.3)

One from Nexus 5 (Android 4.4 and WebView based on Chromium)

你知道在 webview 中是否有一个新的选项可以让文本适应屏幕吗？

注意：我不认为我的布局与我的问题有关，但无论如何：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />

</RelativeLayout>

【问题讨论】：

你能分享你的html吗？看起来您可能没有设置视口。

标签： android webview android-4.4-kitkat

【解决方案1】：

看起来这是在使用NARROW_COLUMNS。这是 KitKat 中的 deprecated。

但是，添加了一种新的布局算法可能能够解决此问题，这里有一个示例： https://github.com/GoogleChrome/chromium-webview-samples

主要代码是：

// Use WideViewport and Zoom out if there is no viewport defined
settings.setUseWideViewPort(true);
settings.setLoadWithOverviewMode(true);

settings.setLayoutAlgorithm(LayoutAlgorithm.TEXT_AUTOSIZING);

另一个选项是启用捏缩放：

// Enable pinch to zoom without the zoom buttons
settings.setBuiltInZoomControls(true);

if(Build.VERSION.SDK_INT > Build.VERSION_CODES.HONEYCOMB) {
    // Hide the zoom controls for HONEYCOMB+
    settings.setDisplayZoomControls(false);
}

新的布局算法可能无法解决所有问题，也不清楚如何可靠地模仿旧的换行行为。

大多数反对意见似乎是在移动设备上显示桌面网站的一般浏览器问题。他们喜欢旧的方式，但我还没有看到其他浏览器能像文本换行算法那样做。

【讨论】：

对我来说它不起作用，设置 displayzoomcontrols 仍然不会重排文本，我什至不能使用 TEXT_AUTOSIZING（它甚至不会编译），尽管我已经将我的 sdk 更新到了最新的.
@EladAvron 缩放控件不会重排文本 - 它将允许用户放大和缩小 + 使用捏合缩放来平移页面。这是在网络上显示第三方内容的最可靠和首选的方式。关于不编译，在你下载了kitkat SDK之后，你有没有在你的Android manifest文件中将应用的targetSDKversion设置为19？
是的，但我忘了更新项目的编译器。无论如何，我最终找到了一个可行的解决方案 - 使用 JavaScript 函数将包含的 div 调整为屏幕宽度，并将其称为“onScaleChanged”。
@EladAvron 你能分享你的解决方案吗？
@MRX 我最终撤消了该方法，因为它会导致其他问题，例如缓慢的渐变缩放和冻结。似乎谷歌破坏了一些工作正常的东西，唯一的解决方法是黑客的变通办法，只会进一步破坏。

【解决方案2】：

如果您可以编辑 html（例如使用简单的字符串替换），请将样式 word-wrap: break-word 添加到文本容器 html 元素。例如：如果 html 正文中的顶级元素是<p>，则更改为<p style="word-wrap: break-word;">。然后，webview 将环绕文本并适合屏幕。

【讨论】：

试过了。但 HTM 内容仍然没有被包裹并且水平滚动似乎滚动。