webView的图片自适应问题

最新推荐文章于 2024-05-16 23:47:56 发布

原创最新推荐文章于 2024-05-16 23:47:56 发布 · 402 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webview #图片 #自适应

iOS开发专栏收录该内容

7 篇文章

订阅专栏

本文提供了一种解决方案，通过JavaScript代码自动调整webView中的图片大小，确保图片既不会过大也不会过小，从而提升用户体验。该方法通过遍历所有图片元素并根据指定的最大宽度调整其尺寸，实现图片的自适应展示。

webView加载图片时会出现图片过大过小问题，从而造成整个页面的不协调，在代理方法添加如下代码即可解决此问题

- (void)webViewDidFinishLoad:(UIWebView *)webView
{
    [webView stringByEvaluatingJavaScriptFromString:
     @"var script = document.createElement('script');"
     "script.type = 'text/javascript';"
     "script.text = \"function ResizeImages() { "
     "var myimg,oldwidth;"
     "var maxwidth = 300.0;" // UIWebView中显示的图片宽度
     "for(i=0;i <document.images.length;i++){"
     "myimg = document.images[i];"
     "if(myimg.width > maxwidth){"
     "oldwidth = myimg.width;"
     "myimg.width = maxwidth;"
     "}"
     "}"
     "}\";"
     "document.getElementsByTagName('head')[0].appendChild(script);"];
    [webView stringByEvaluatingJavaScriptFromString:@"ResizeImages();"];
}