UIWebView 适配屏幕


UIWebView 适配屏幕

概述

这个问题困扰了我好多天,了寻找了很多解决方法但是不见效果。

首先我来说说故事背景吧,在一个项目的中,我被要求去把数据库里的一段HTML代码加载到app当中。我以为还是挺简单的,但是问题来了。

如何在App中加载一大段 HTML呢???

首先 当然要用到 UIWebView,大家和我估计第一反应都是这样。如何写代码呢 check一下也很多。大体如下:



NSString *HTMLData = dataPostFormDataBase;

[self.webView loadHTMLString:HTMLData baseURL:[NSURL fileURLWithPath: [[NSBundle mainBundle]  bundlePath]]];


so easy 妈妈再也不用担心我的webView,但是问题又来了,HTML代码里面 好像没有定义宽高 约束布局。到了webView里面图片就会变的 大的离谱。

那怎么调整大小呢

Google了一下(不会被抓吧),查到这么一个属性:

self.webView.scalesPageToFit = YES;

然后 嘿,好想还真变小了,但是问题又来了,由于HTML 没有定义约束,这是的图片变的太小了,右边有许多地方留白,那不是见鬼了啊。

于是乎又要踏上漫漫Google路。


用JS控制其宽度

经过查询,原来可以在webView 中嵌入JS,屌炸了。然后我就知道怎么调整宽高了。

思想如下:找到HTML代码中包裹img的父容器(我的是p标签),把它的宽度调整为屏幕的宽度。值得注意的是,一定要在 didFinishLoad的后 才能添加JS,不然JS加上去没用。原因,自己check一下吧。

具体代码如下:

-(void)webViewDidFinishLoad:(UIWebView *)webView

{

//定义JS字符串

NSString *script = [NSString stringWithFormat: @"var script = document.createElement('script');"

"script.type = 'text/javascript';"

"script.text = \"function ResizeImages() { "

"var myimg;"

"var maxwidth=%f;" //屏幕宽度

"for(i=0;i

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • UIWebView 适配屏幕 概述 这个问题困扰了我好多天,了寻找了很多解决方法但是不见效果。首先我来说说故事背景...
    David_Cap阅读 7,227评论 9 8
  • 项目中用到UIWebview,发现在iOS8.0系统下网页加载不全,9.0以上是没有问题的,都可以加载出来。经过实...
    雨雪霏霏why阅读 700评论 1 1
  • http://www.cnblogs.com/mddblog/p/5281748.html 一、整体介绍 UIWe...
    F麦子阅读 1,250评论 0 2
  • 一、简介 近两年随着HTML5的迅速发展与日趋成熟,越来越多的移动开发者选择使用HTML5来进行混合开发,不仅节约...
    RainyGY阅读 1,892评论 1 12
  • 一、简介 近两年随着HTML5的迅速发展与日趋成熟,越来越多的移动开发者选择使用HTML5来进行混合开发,不...
    宝宝teacher阅读 2,341评论 3 15