ios UIWebView中如何让图片大小适应屏幕宽度

1.采用在html的head中加mata标签
<meta name="viewport" content="height=device-height,width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
缺点：整个页面都会被缩小来适应屏幕宽度。

2.遍历html中的img 标签，通过img标签中src值来下载图片以获取图片的宽高。在按照一定宽高比得到适应屏幕的宽和高之后，重新定义img标签（加上width和height）
缺点：html内容太大会影响遍历速速，要求对img标签的匹配精确到高和快。（注：图片下载不一定是要整个图片都下载完之后才能获取图片的实际宽高大小！）
有点：真正的实现按照原本图片宽高比来缩放适应屏幕大小。


3.通过添加js来自动修改图片的大小。
优点：效果和浏览网页的效果是一致的（会异步加载图片，不影响用户体验），图片一旦加载完毕会自动按照比例来调整图片宽高。

缺点：no！

代码：

 

<script >
//自动调整大小
function AutoResizeImage(maxWidth,maxHeight,objImg){
    var img = new Image();
    img.src = objImg.src;
    var hRatio;
    var wRatio;
    var Ratio = 1;
    var w = img.width;
    var h = img.height;
    wRatio = maxWidth / w;
    hRatio = maxHeight / h;
    if (maxWidth ==0 && maxHeight==0){
        Ratio = 1;
    }else if (maxWidth==0){//
        if (hRatio<1) Ratio = hRatio;
        }else if (maxHeight==0){
            if (wRatio<1) Ratio = wRatio;
    }else if (wRatio<1 || hRatio<1){
        Ratio = (wRatio<=hRatio?wRatio:hRatio);
    }
    if (Ratio<1){
        w = w * Ratio;
        h = h * Ratio;
    }
    objImg.height = h;
    objImg.width = w;
}
function AutoResizeAllImage(maxWidth)
{
    document.write("This document contains: ")
    document.write(document.images.length + " images.<br\>")
    for(i=0; i<document.images.length ;i++)
    {
        action = "AutoResizeImage("+maxWidth +",0,this)"
        thisImg = document.images[i];

        thisImg.setAttribute("onload", action)
    }

}

//调用
AutoResizeAllImage(320);
</script>

 

 

 

其他.UIWebview 读取图片的3中方法：
1）常用写法
<img src="http://images.cnblogs.com/logo.png" />
优点：在html显示的时候图片会异步加载，也就是说你会先看到html中的文字，而图片会一点点显示出来
2）data URL写法
<img src="data: image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAAPAAA/+4ADkFkb2JlAGTAAAAAAf/bAIQABgQEBAUEBgUFBgkGBQYJCwgGBggLDAoKCwoKDBAMDAwMDAwQDA4PEA8ODBMTFBQTExwbGxscHx8fHx8fHx8fHwEHBwcNDA0YEBAYGhURFRofHx8fHx8fHx8fHx8fHx8fH ...." />
必须等图片转换成data之后，才能加载html显示图片。
缺点：通过使用img标签的data: image/jpeg;base64 属性来添加图片的data。缺点：当图片较多以及图片比较大的时候，转换出来的data会特别特别长！
3）使用相对路径的写法：
<img src="img/logo.png" />
缺点：图片必须在Bundle Resources目录下，也就是说必须在app打包之前就要包含这个图片存在bundle resource中。
优点：在css中指定图片样式，采用该方法最合适了！


4）使用绝对路径file://的写法
<img src="file://路径">  路径是指本地路径。
这种方法是读取本地路径的图片来。常用之处就是：当你第一次向网络请求图片之后，你可以把图片缓存起来，下次不用再次请求网络！
那么，如果在ios上使用UIWebview来读取加载本地图片呢？ 
通过把下载的图片保存在沙盒目录下，在loadHTMLString函数中中，指定baseURL为沙盒目录即可！
(void)loadHTMLString:(NSString *)string baseURL:(NSURL *)baseURL 

如有其它看法的同学，请多多指教！