Android中的WebView文本缩放问题 [英] WebView Text Zoom Issue in Android
问题描述
我在android中有一个文档阅读器项目。主要活动包括WebView。文本正在从html中读取。在顶部选项菜单中，包含一个用于动态增加文本大小的按钮（文本包装）。到目前为止很清楚，但按下按钮时，文本大小有所增加，但所有文本都在屏幕上向下移动，两次按下按钮，文本大小增加，所有文本再次向下移动一点。这种情况真的让读者感到沮丧。读者必须在按下按钮后返回停止的位置，以便读者不会丢失阅读位置。如何解决这个问题？
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:
我的WebView的Html内容：
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>
推荐答案
我在屏幕上保留文字的想法是存储任何元素（p，div，img等）的引用都在屏幕上的某个 x，y 点，更改字体大小，然后将该元素滚动返回到屏幕上。
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.
我创建了一个在Android Webview中有效的代码示例：
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!
这篇关于Android中的WebView文本缩放问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
