Android中的WebView文本缩放问题

我在android中有一个文档阅读器项目。 主要活动包括一个WebView。 文本是从HTML阅读。 在顶部选项菜单中包含一个dynamic增加文本大小的button(文本正在打包)。 到目前为止如此清楚,但按下button时,文本大小有所增加,但所有文本都在屏幕上向下移动,按下button两次,文本大小增加,所有文本再次向下移动。 这种情况真的让读者感到沮丧。 阅读器按下button后,必须返回到停止的位置,以免阅读器丢失阅读位置。 如何解决这个问题呢?

问题:

问题:

解决问题的时候:

解决问题的时候:

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

Solutions Collecting From Web of "Android中的WebView文本缩放问题"

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

  1. 在更改字体大小之前,请存储文本视图的滚动高度和滚动位置。 确定滚动高度和滚动位置之间的比率(介于0和1之间)
  2. 更改字体大小
  3. 渲染后,测量新的滚动高度
  4. 将新的滚动位置设置为新滚动高度乘以旧比率。

相关的片段:

 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上testing,但是我相信总的方向应该是可行的。

我在屏幕上保留文本的想法是存储一个引用到任何“元素”(p,div,img等)在屏幕上的某个x,y点,改变字体大小,然后滚动该元素回到屏幕。

我创build了一个在Android Web视图中工作的代码示例:

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

希望这可以解决你的问题!

尝试这个 :

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