安卓中的WebView文本缩放问题
我有一个android文档阅读器项目。主要活动包括一个WebView。这些课文是从html上读来的。在“顶部选项”菜单中，包括一个动态增加文本大小的按钮(文本正在包装)。到目前为止，已经很清楚了，但是当按下按钮时，文本大小会有所增加，但所有文本都会在屏幕上向下移动，并且两次按下按钮，文本大小会增加，所有文本都会再次向下移动。这种情况确实在发生，让读者感到沮丧。按下按钮后，阅读器必须回到原来的位置，这样阅读器就不会失去阅读位置。如何解决这个问题？
这一问题：
问题解决后：
我的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>回答 4
Stack Overflow用户
发布于 2020-04-20 11:28:09
您应该在TextViews中使用ListView，并在缩放之前和缩放后存储顶部列表项的id，滚动到存储的列表项。为了获得良好的滚动效果，您应该隐藏具有基本图像缩放效果的滚动。
Stack Overflow用户
发布于 2016-04-12 07:42:00
我将文本保存在屏幕上的想法是存储对屏幕上某个x,y点上的“元素”(p、div、img等)的引用，改变字体大小，然后将该元素滚动回屏幕上。
我创建了一个在中工作的代码示例：
//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();
}希望这能解决你的问题！
Stack Overflow用户
发布于 2016-04-13 14:23:32
我建议在字体大小增加之前和之后使用相对滚动位置来计算用户应该在哪里。这可以通过几个步骤完成：
- 在更改字体大小之前，存储文本视图的滚动高度和滚动位置。确定滚动高度和滚动位置的比率(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
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号