iOS-UIWebView加载HTMLString图片显示超过屏幕宽度,导致webView可以左右滑动处的理方法

简单介绍一下使用[self.webView loadHTMLString:htmls baseURL:nil]单纯加载HTMLString的小技巧。

  • 主要解决的是当加载的HTMLString既有文字又有图片时,图片没有缩放,导致图片宽度超过屏幕宽度,使得webView整体左右都可以滑动,这样效果非常不好(见下图):

01-图片过宽导致webView可以左右滑动.gif

01-图片过宽导致webView可以左右滑动.gif

效果不好的代码如下:

  • 注:以下方法是在网络请求成功回调里面调用的 // 网络请求加载的数据,进行字典转模型 NSDictionary *dict = [result objectForKey:@"data"]; HQNewsDetailModel *model = [HQNewsDetailModel mj_objectWithKeyValues:dict]; // model.details就是后台返回的HTMLString NSString *htmlString = [NSString stringWithString:model.details]; // webView直接加载HTMLString [self.webView loadHTMLString:htmls baseURL:nil];

经过调整以后(见下图):

02-经过调整以后的效果.gif

调整后的代码如下:

  • 注:以下方法是在网络请求成功回调里面调用的 // 网络请求加载的数据,进行字典转模型 NSDictionary *dict = [result objectForKey:@"data"]; HQNewsDetailModel *model = [HQNewsDetailModel mj_objectWithKeyValues:dict]; /**
    • model.details就是后台返回的HTMLString
    • " $img[p].style.width = '100%%';\n"--->就是设置图片的宽度的
    • 100%代表正好为屏幕的宽度 */ NSString *htmlString = [NSString stringWithFormat:@"<html> \n" "<head> \n" "<style type="text/css"> \n" "body {font-size:15px;}\n" "</style> \n" "</head> \n" "<body>" "<script type='text/javascript'>" "window.onload = function(){\n" "var $img = document.getElementsByTagName('img');\n" "for(var p in $img){\n" " $img[p].style.width = '100%%';\n" "$img[p].style.height ='auto'\n" "}\n" "}" "</script>%@" "</body>" "</html>",model.details];

    // webView直接加载HTMLString [self.webView loadHTMLString:htmlString baseURL:nil];

03-关键代码描述.png

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏xx_Cc的学习总结专栏

六天完成一个简单iOS App - 第六天

3045
来自专栏逸鹏说道

06.移动先行之谁主沉浮----我的代码我来写(Xaml的优势)

如果移动方向有任何问题请参考===> 异常处理汇总-移动系列(点) 前面几节课,我们都是在前台创建对象,进行一些设置,那么我们为什么不用传统的方法来编程呢? 我...

2645
来自专栏非著名程序员

智能下拉刷新框架-SmartRefreshLayout

框架?下拉刷新控件还能框架化?智能?啥玩意来着?二话不多少先上Demo效果图,咱们再来探个究竟。 Github 传送门(https://github.com/s...

6195
来自专栏Bug生活2048

.net core下对于Excel的一些操作及使用

对于后台相关的管理系统,Excel导出是基本的功能,下面就简单说下实现该功能的代码实现吧

1602
来自专栏上善若水

046android初级篇之android多分辨率兼容

android:anyDensity="true"时,应用程序安装在不同密度的终端上时,程序会分别加载xxhdpi、xhdpi、hdpi、mdpi、ldpi文件...

942
来自专栏拂晓风起

HTML5动画软件工具编辑器 HTML5动画分类 工具推荐

1753
来自专栏LinXunFeng的专栏

iOS - 一行代码实现调用系统相机与相册,可配置导航栏背景与字体颜色

1405
来自专栏Coco的专栏

【技巧篇】解决悬浮的<header>、<footer>遮挡内容的处理技巧

2315
来自专栏mukekeheart的iOS之旅

iOS项目——自定义UITabBar与布局

  在上一篇文章iOS项目——基本框架搭建中,我们详细说明了如何对TabBarItem的图片属性以及文字属性进行一些自定义配置。但是,很多时候,我们需要修改Ta...

4899
来自专栏小蠢驴iOS专题

MNKit - 业务开发中简化属性设置的工具类

2328

扫码关注云+社区

领取腾讯云代金券