javascript – Android中的WebView文本縮放問題
我在android中有一個文檔閱讀器項目.主要活動包括WebView.文本正在從html中讀取.在「頂部選項」菜單中,包含一個用於動態增加文本大小的按鈕(文本包裝).到目前為止很清楚,但按下按鈕時,文本大小有所增加,但所有文本都在屏幕上向下移動,兩次按下按鈕,文本大小增加,所有文本再次向下移動一點.這種情況真的讓讀者感到沮喪.讀者必須在按下按鈕後返回停止的位置,以便讀者不會丟失閱讀位置.如何解決這個問題呢？
The Issue:
When solved the issue:
Html content of my WebView:
p{} p.x1{} p.x2{} p.x3{} p.x4{}
h2.x1{} h2.x2{} h2.x3{} h2.x4{}
//paragraph-1
Title-1
Title-2
Title-3
Title-4
Text content.
//paragraph-2
Title-1
Title-2
Text content.
//paragraph-3
Title-1
Title-2
Title-3
Text content.
//paragraph-4
Title-1
Title-2
Text content.
//...
我建議在字體大小增加之前和之後使用相對滾動來計算用戶應該在哪裡.這可以通過幾個步驟完成：
>在更改字體大小之前,請存儲文本視圖的滾動高度和滾動位置.確定滾動高度和滾動位置之間的比率(介於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;
}你可以在這裡查看一個例子： https://jsfiddle.net/Ln43xxv5/
我必須承認我現在無法在android中測試,但我確實相信大方嚮應該有效.
翻譯自：https://stackoverflow.com/questions/36235903/webview-text-zoom-issue-in-android
原文 : 代碼日誌