Android中的WebView文本缩放问题答案

【问题标题】：WebView Text Zoom Issue in AndroidAndroid中的WebView文本缩放问题
【发布时间】：2016-07-14 03:38:33
【问题描述】：

我在 android 中有一个文档阅读器项目。主 Activity 包括一个 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>

【问题讨论】：

标签： javascript java android jquery webview

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

相关的sn-p：

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 中进行测试，但我确实相信大方向应该可行。

【讨论】：

我在 jsfiddle 和 android 应用程序上试过你的脚本，但不稳定。因为段落没有停留在屏幕顶部，它在增加字体时会上下移动。
此代码运行非常精确，适用于基于数学的解决方案。我喜欢！但是当容器包含不同大小的字体和图像时会发生什么？我认为身高比例不会解释这些差异。
没想到；改变有效点！我想这个解决方案只会有机会用于类似电子书的内容......感谢您的评论。
只有文字内容，但字体大小不同是不可避免的。所以我说没有稳定。

【解决方案3】：

我在屏幕上保留文本的想法是在屏幕上某个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();
}

希望这能解决您的问题！

【讨论】：

已编辑问题，您可以查看更多详细信息。我不明白“PARENT-ELEMENT-ID”？
@ATES 好吧，我调整了我的代码以完美执行您的 HTML！
@ATES 你在安卓上试过了吗？ JSbin 完美运行！
@ATES 我的代码选择了页面中接近中间的段落。这就是为什么对于非常小的字体，它会跳过。如果你使用window.innerHeight/5（更大的除数）它不会在台式机上跳过。
Android 应用可以安装不同的屏幕尺寸，因此需要更智能的脚本。

【解决方案4】：

试试这个：

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

【讨论】：