Android 中的 WebView 文本缩放问题

Question

我在 android 中有一个文档阅读器项目。 主要活动包括一个 WebView。 文本是从 html 读取的。 在顶部选项菜单中包含一个用于动态增加文本大小的按钮（文本正在换行）。 到目前为止很清楚，但是当按下按钮时，文本大小会有所增加，但所有文本都在屏幕上向下移动，两次按下按钮时，文本大小会增加并且所有文本再次向下移动一点。 这种情况确实让读者感到沮丧。 按下按钮后，阅读器必须返回上次停止的位置，以免阅读器丢失阅读位置。 如何解决这个问题？

问题：

解决问题时：

我的 WebView 的 Html 内容：

<!DOCTYPE html>

    <head>
        <style type="text/css"> 
            p{} p.x1{} p.x2{} p.x3{} p.x4{} 
            h2.x1{} h2.x2{} h2.x3{} h2.x4{}
        </style>
    </head>

    <body>

        //paragraph-1
        <p class="x1">Title-1</p>
        <p class="x2">Title-2</p>
        <p class="x3">Title-3</p>
        <p class="x4">Title-4</p>
        <p>Text content.</p>


        //paragraph-2
        <h class="x1">Title-1</p>
        <h class="x2">Title-2</p>
        <p>Text content.</p>


        //paragraph-3
        <h class="x3">Title-1</p>
        <h class="x4">Title-2</p>
        <p class="x3">Title-3</p>
        <p>Text content.</p>


        //paragraph-4
        <h class="x2">Title-1</p>
        <p class="x3">Title-2</p>
        <p>Text content.</p>


        //...

    </body>

</html>

Answer 1

您应该在 ListView 中使用 TextViews 并在缩放之前和缩放滚动到存储的列表项之后存储顶部列表项的 id。 为了获得良好的滚动效果，您应该使用基本图像缩放效果隐藏滚动。

Answer 2

我将文本保留在屏幕上的想法是在屏幕上的某个x,y点存储对任何“元素”（p、div、img 等）的引用，更改字体大小，然后将该元素滚动回屏幕。

我创建了一个适用于 Android Webview 的工作代码示例：

//Route your onclick handler to our new function
function fontBtnClk() {

  //Store whatever paragraph container is in the middle of the screen
  var currentParagraph = document.elementFromPoint(window.innerWidth/3, window.innerHeight/3);

  //If the above "paragraph selector" selected the whitespace in-between two paragraphs, and stored the parent element instead:
  if(currentParagraph.tagName.toLowerCase()=="body") {

    //Divide by a different number to select the winning paragraph
    currentParagraph = document.elementFromPoint(window.innerWidth/3, window.innerHeight/2);
  }

  //Call your existing font size handler
  increaseFontSize();

  //Move the previous paragraph back onto the screen:
  currentParagraph.scrollIntoView();
}

希望这能解决您的问题！

Answer 3

我建议使用字体大小增加前后的相对滚动位置来计算用户应该在哪里。 这可以通过几个步骤来完成：

在改变字体大小之前，存储文本视图的滚动高度和滚动位置。 确定滚动高度和滚动位置之间的比例（0 和 1 之间）
更改字体大小
渲染后，测量新的滚动高度
将新滚动位置设置为新滚动高度乘以旧比率。

相关片段：

function setSize() {
  var heightBefore = textContainer.scrollHeight;
  var scrollBefore = textContainer.scrollTop;
  var percBefore = scrollBefore / heightBefore;

  textContainer.style.fontSize = fontSize + "px";

  var heightAfter = textContainer.scrollHeight;
  var scrollAfter = textContainer.scrollTop;

  var correctedScrollAfter = Math.floor(heightAfter * percBefore);
  textContainer.scrollTop = correctedScrollAfter;
}

您可以在此处查看示例： https : //jsfiddle.net/Ln43xxv5/

我必须承认我现在无法在 android 中进行测试，但我确实相信大方向应该可行。

Answer 4

试试这个：

settings.setDefaultFontSize(50);  //Larger number == larger font size

Android 中的 WebView 文本缩放问题

问题描述

4 个解决方案

解决方案1
2 已采纳 2020-04-20 11:28:09

解决方案2
1 2016-04-12 07:42:00

解决方案3
1 2016-04-13 14:23:32

解决方案4
-1 2016-04-11 20:52:02

Android 中的 WebView 文本缩放问题

问题描述

4 个解决方案

解决方案1 2 已采纳 2020-04-20 11:28:09

解决方案2 1 2016-04-12 07:42:00

解决方案3 1 2016-04-13 14:23:32

解决方案4 -1 2016-04-11 20:52:02

解决方案1
2 已采纳 2020-04-20 11:28:09

解决方案2
1 2016-04-12 07:42:00

解决方案3
1 2016-04-13 14:23:32

解决方案4
-1 2016-04-11 20:52:02