WebView Text Zoom Issue in Android

问题

I have a document reader project in android. Main Activity includes a WebView. The texts are reading from html. In Top Options menu includes a button for increasing text size dynamically (text are wrapping). So far so clear but when the button pressed, the text size is some increases but all text are shifting down in screen and twice wehen pressing the button, the text size increases and all text shifting down a little more again. This situation is really happening frustrating for readers. The reader must go back to where it left off after pressing the button so the reader should not lose reading location. How to solve this problem?

The Issue:

When solved the issue:

Html content of my WebView:

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

回答1:

I propose to use the relative scrollposition before and after the font size increase to calculate where the user should be. This can be done in a few steps:

Before changing font size, store the scroll height and scroll position of the text view. Determine the ratio between scroll height and scroll position (between 0 and 1)
Change the font size
After render, measure the new scroll height
Set the new scroll position as new scroll height times old ratio.

The relevant snippet:

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

You can check out an example here: https://jsfiddle.net/Ln43xxv5/

I must admit I cannot test in android right now, but I do believe the general direction should work.

回答2:

My idea of keeping text on-screen is to store a reference to whatever "element" (p, div, img, etc) is on the screen at a certain x,y point, changing the font size, then scrolling that element back onto the screen.

I created a working code example that works in the 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();
}

Hope this fixes your issue!

回答3:

Try this :

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

来源：https://stackoverflow.com/questions/36235903/webview-text-zoom-issue-in-android

标签

javascript

java

android

jquery

webview