WebView Text Zoom-Problem in Android

Ich habe ein Dokument Reader-Projekt in Android. Main Activity beinhaltet ein WebView. Die Texte lesen aus HTML. Im Menü "Top-Optionen" finden Sie eine Schaltfläche zum dynamischen Erhöhen der Textgröße (Text wird umbrochen). So weit so klar, aber wenn die Taste gedrückt wird, ist die Textgröße etwas erhöht, aber der gesamte Text wird im Bildschirm nach unten verschoben und zweimal when die Taste gedrückt, erhöht sich die Textgröße und der gesamte Text wird wieder ein wenig nach unten verschoben. Diese Situation ist wirklich frustrierend für die Leser. Der Leser muss nach dem Drücken des Knopfes dorthin zurückkehren, wo er aufgehört hat, so dass der Leser den Leseort nicht verlieren sollte. Wie man dieses Problem löst?WebView Text Zoom-Problem in Android

Das Problem:

Wenn das Problem gelöst:

Html c ontent meiner 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>

Quelle

2016-03-26 ATES

-1

Try this:

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

Quelle

2016-04-11 20:52:02 Istiyak

Meine Idee Text auf dem Bildschirm zu halten ist eine Referenz zu speichern, was auch immer "Element" (p, div, img, etc) ist auf dem Bildschirm an einem bestimmten x,y Punkt, Ändern der Schriftgröße, dann Scrollen dieses Element zurück auf den Bildschirm.

Ich habe ein Arbeitscodebeispiel, das im Android Webview funktioniert:

//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 behebt das Problem!

Quelle

2016-04-12 07:42:00

Bearbeitete Frage, könnten Sie mehr Details sehen.Ich verstehe "___ ELTERN-ELEMENT-ID ___" nicht? – ATES

@ATES in Ordnung, ich habe meinen Code für die perfekte Ausführung mit Ihrem HTML optimiert! –

Ihr Skript nicht stabil (http://jsbin.com/tuyaru/edit?output) – ATES

Ich schlage vor, die relativ scrollposition vor und nach der Schriftgröße zu erhöhen, um zu berechnen, wo der Benutzer sein sollte. Dies kann in wenigen Schritten erfolgen:

Bevor Sie die Schriftgröße ändern, speichern Sie die Bildlaufhöhe und Bildlaufposition der Textansicht. Bestimmen Sie das Verhältnis zwischen Bildlaufhöhe und Rollposition (zwischen 0 und 1)
Ändern der Schriftgröße
Nach machen, messen Sie die neue Scroll-Höhe
Stellen Sie die neue Bildlaufposition als neue scroll Höhe mal alt Verhältnis.

Der entsprechende Code-Schnipsel:

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

Sie können hier ein Beispiel finden Sie unter: https://jsfiddle.net/Ln43xxv5/

Ich muss zugeben, dass ich jetzt nicht in Android testen, aber ich tun glauben, dass die allgemeine Richtung sollte arbeiten.

Quelle

2016-04-13 14:23:32 user3297291

Ich habe dein Skript auf jsfiddle und Android-App versucht, aber nicht stabil. Weil der Absatz nicht auf dem Bildschirm oben bleibt, bewegt er sich nach oben und unten, wenn er die Schriftart erhöht. – ATES

Dieser Code läuft sehr präzise für eine mathematisch basierte Lösung. Ich mag das! Aber was passiert, wenn der Container Schriftarten unterschiedlicher Größe und Bilder enthält? Ich glaube nicht, dass das Höhenverhältnis diese Diskrepanzen berücksichtigt. –

Hatte nicht darüber nachgedacht; variiere gültigen Punkt! Ich denke, dass diese Lösung nur eine Chance für E-Book-ähnliche Inhalte haben würde ... Danke für deinen Kommentar. – user3297291

WebView Text Zoom-Problem in Android

Antwort

Verwandte Themen