iOS开发Webview,加载html代码图片适配

来源:互联网 发布:淘宝儿童食品代理 编辑:程序博客网 时间:2024/05/16 02:31

       在iOS与html混合开发中,往往会使用到webview去加载自己编写或者服务器分发的html代码,这其中就会设计到html代码不能完美适配到移动端,在一些地方我们就要做相应的修改。

如果我们需要修改的是一段已知的html代码,且本身有一定html基础的情况下, 我们可以去替换出相应的字符串,从而达到适配当前页面的情况,例如

//        _model.rule = [_model.rule stringByReplacingOccurrencesOfString:@"500"withString:@"400"];

//        _model.rule = [_model.rule stringByReplacingOccurrencesOfString:@"250"withString:@"200“];

_model.rule就是我们从服务器上获取到的html代码,我们需要在webview上去loadHtmlString,在我们已知这段html代码的情况下,我们就可以去替换掉里面的部分唯一数据。如果某处css设置宽度为500,且唯一,在手机端又无法适配,我们就可以去做相应的修改,当然这种方法拥有较大的局限性,只是在某些js修改较为麻烦的情况下,我门可以尝试性的去进行修改。

如果仅仅是web图片超出手机屏幕宽度或高度,就可以通过js修改去完成脚步调用,从而达到适配的效果,代码如下:

    [webView stringByEvaluatingJavaScriptFromString:

     @"var script = document.createElement('script');"

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

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

     "var myimg,oldwidth;"

     "var maxwidth=document.body.clientWidth;"//缩放系数</span>

     "for(i=0;i <document.images.length;i++){"

     "myimg = document.images[i];"

     "if(myimg.width > maxwidth){"

     "oldwidth = myimg.width;"

     "myimg.width = maxwidth;"

     "myimg.height = myimg.height * (maxwidth/oldwidth);"

     "}"

     "}"

     "}\";"

     "document.getElementsByTagName('head')[0].appendChild(script);"];

    

    [webView stringByEvaluatingJavaScriptFromString:@"ResizeImages();"];


今天的总结大概就是这些,也希望在以后能和大家多多讨论,如有欠缺,欢迎斧正
0 0