Android中的WebView文本缩放问题
Posted
技术标签:
【中文标题】Android中的WebView文本缩放问题【英文标题】：WebView Text Zoom Issue in Android 【发布时间】：2016-07-14 03:38:33 【问题描述】：我在 android 中有一个文档阅读器项目。主 Activity 包括一个 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>
【问题讨论】：
【参考方案1】：您应该在 ListView 中使用 TextViews 并在缩放之前和缩放滚动到存储的列表项之后存储顶部列表项的 id。为了获得良好的滚动效果，您应该使用基本的图像缩放效果隐藏滚动。
【讨论】：
【参考方案2】：我建议在字体大小增加之前和之后使用 relative 滚动位置来计算用户应该在哪里。这可以通过几个步骤完成：
-
在更改字体大小之前，存储文本视图的滚动高度和滚动位置。确定滚动高度和滚动位置之间的比率（0 到 1 之间）
更改字体大小
渲染后，测量新的滚动高度
将新滚动位置设置为新滚动高度乘以旧比率。
相关的sn-p：
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 中进行测试，但我确实相信大方向应该可行。
【讨论】：
我在 jsfiddle 和 android 应用程序上试过你的脚本，但不稳定。因为段落没有停留在屏幕顶部，它在增加字体时会上下移动。 此代码运行非常精确，适用于基于数学的解决方案。我喜欢！但是当容器包含不同大小的字体和图像时会发生什么？我认为身高比例不会解释这些差异。 没想到；改变有效点！我想这个解决方案只会有机会用于类似电子书的内容......感谢您的评论。 只有文字内容，但字体大小不同是不可避免的。所以我说没有稳定。【参考方案3】：我在屏幕上保留文本的想法是在屏幕上某个x,y 点存储对任何“元素”（p、div、img 等）的引用，更改字体大小，然后 滚动该元素回到屏幕上。
我创建了一个在 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();
希望这能解决您的问题！
【讨论】：
已编辑问题，您可以查看更多详细信息。我不明白“PARENT-ELEMENT-ID”？ @ATES 好吧，我调整了我的代码以完美执行您的 HTML！ @ATES 你在安卓上试过了吗？ JSbin 完美运行！ @ATES 我的代码选择了页面中接近中间的段落。这就是为什么对于非常小的字体，它会跳过。如果你使用window.innerHeight/5（更大的除数）它不会在台式机上跳过。
Android 应用可以安装不同的屏幕尺寸，因此需要更智能的脚本。【参考方案4】：
试试这个：
settings.setDefaultFontSize(50); //Larger number == larger font size
【讨论】：
以上是关于Android中的WebView文本缩放问题的主要内容，如果未能解决你的问题，请参考以下文章
Android Webview - 使用一个 loadUrl 缩放图像以正确适合屏幕