Question

我想在iPhone UIWebView中显示HTML。我的HTML看起来像

text
text
<img src.../>
text
text

如何使组件（通过JavaScript或Objective C）使图像大小适合窗口 - 即文本大小保持不变但图像将按比例缩小/放大以防止水平滚动？

由于

Answer 1

你必须知道HTML的样子，因为唯一的方法就是操纵DOM。

在Mac上，您可以通过Objective C访问DOM，但该API在iPhone上不可用。幸运的是，你可以通过UIWebView javascript桥做到这一点。

假设HTML看起来像这样：

text
text
<img id="myimage" src="..." height="150" width="150"/>
text
text

您可以向HTML添加与此类似的JS函数：

<script>
function enlargeImage(w, h)
{
   var img = document.getElementById("myimage");
   img.width = w;
   img.height = h;
}
</script>

然后你只需要打电话：

[webView stringByEvaluatingJavaScriptFromString:@"enlargeImage(300, 300)"];

唯一需要注意的是，您应该等待HTML通过webViewDidFinishLoad委托回调完全加载。

显然，您也可以使用以下快捷方式：

[webView stringByEvaluatingJavaScriptFromString:
    @"document.getElementById("myimage").width = 300;"];
[webView stringByEvaluatingJavaScriptFromString:
    @"document.getElementById("myimage").height = 300;"];

Answer 2

您可以使用百分比或ems来调整CSS中的图像大小。这意味着您需要将图像的像素大小转换为百分比或ems。你也应该使用jpeg，因为它们可以更好地扩展。

Jon Tan的article是我最喜欢的主题，几乎可以解释整个过程。

UIWebView - 独立于文本缩放图像

2 个答案: