UIWebView-獨立於文本縮放圖像

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）的這篇文章是我最喜歡的主題，並且幾乎解釋了整個過程。