Как сделать текст подходящим для экрана (текстовое обертывание) в WebView с помощью KitKat

У меня проблема в моем WebView с Android 4.4. Перед KitKat текст автоматически устанавливался со всеми разрешениями устройств в веб-просмотрах. Но сегодня он не подходит автоматически с 4.4. Я думаю, это из-за обновления WebView на основе Chromium с KitKat.

Вот 2 скриншота одной и той же страницы:

Один из Galaxy Nexus (Android 4.3)

Один из Nexus 5 (Android 4.4 и WebView на основе Chromium)

Знаете ли вы, есть ли новая опция для размещения текста с экраном в веб-просмотре?

NB: Я не думаю, что мой макет как-то связан с моей проблемой, но здесь все равно:

<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>

Ответы

Ответ 1

Похоже, что используется NARROW_COLUMNS. Это было устарело в KitKat.

Однако был добавлен новый алгоритм компоновки, который мог бы исправить это, здесь есть пример: 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);
}

Новый алгоритм компоновки может не решить все проблемы, и он не ясно, как надежно имитировать старое поведение переноса.

Большинство возражений похоже на общие проблемы браузера по отображению сайтов на мобильных устройствах. Им понравился старый способ, но я не видел ни одного другого браузера, который выполнял бы алгоритм обертывания текста.

Ответ 2

Если вы можете редактировать html (например, с помощью простой замены строки), добавьте стиль word-wrap: break-word в элемент html контейнера текста. Например: если элемент верхнего уровня в теле html - это <p>, измените на <p style="word-wrap: break-word;">. Затем веб-просмотр обернет текст и поместится на экран.