Javascript Android中的WebView文本缩放问题

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

问题是：

问题解决后：

my WebView的Html内容：

p{}p.x1{}p.x2{}p.x3{}p.x4{}
h2.x1{}h2.x2{}h2.x3{}h2.x4{}
//第1款
标题1

标题2

标题3

标题4

文本内容

//第2款
标题-1

标题2

文本内容

//第3款
标题-1

标题2

标题3

文本内容

//第4段
标题-1

标题2

文本内容

//...

试试这个：

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

---

我在屏幕上保留文本的想法是在某个

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();
}

希望这能解决你的问题

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

更改字体大小之前，请存储文本视图的滚动高度和滚动位置。确定滚动高度和滚动位置之间的比率（介于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;
}

您可以在此处查看一个示例：

---

我必须承认，我现在无法在android上进行测试，但我相信总体方向应该是可行的。

您应该在列表视图中使用文本视图，并在缩放前和缩放后存储顶级列表项的id滚动到存储的列表项。要获得良好的滚动效果，您应该隐藏具有基本图像缩放效果的滚动。

编辑问题，您可以查看更多详细信息。我不懂“PARENT-ELEMENT-ID”？@好吧，我调整了我的代码，让你的HTML完美执行@你试过安卓吗？JSbin工作得非常好@我的代码选择页面上接近中间的段落。这就是为什么使用小字体时，它会跳过。如果你使用

window.innerHeight/5

（更大的除数），它不会在桌面计算机上跳过。Android应用程序可以安装不同的屏幕大小，因此需要比Windows更智能的脚本。我在JSFIDLE和Android应用程序上尝试了你的脚本，但没有稳定的脚本。因为段落不会停留在屏幕顶部，当它增加字体时，它会上下移动。对于基于数学的解决方案，此代码运行得非常精确。我喜欢！但是当容器包含不同大小的字体和图像时会发生什么呢？我不认为身高比能解释这些差异；改变有效点！我想这个解决方案只会为电子书内容提供机会。。。谢谢你的评论。这里只有文本内容，但不同的字体大小是不可避免的。所以我说没有马厩。

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