webview显示html网页文件的问题

懒人有懒法，不想自己写代码解决网页文件的排版，图片显示等等烦人的问题，用webview显示却出现网页文件不适应屏幕大小，找了半天资料找到这么一句：

webSettings.setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);暂且解决了问题

无奈权宜之计解决不了所有问题，美化网页排版的问题还是没有解决，html加css仍然解决不了问题，无奈去掉上面WebSetting的设置，html样式居然起作用了。

然后看到图片自适应还是有问题，有找了一圈发现一行css代码就可以解决：

 

img { max-width: 100%;} 这行代码对于大多数嵌入网页的视频也有效，所以可以写成：

img, object { max-width: 100%;}

老版本的IE不支持max-width，

所以只好写成： img { width: 100%; }

 

此外，windows平台缩放图片时，可能出现图像失真现象。这时，可以尝试使用IE的专有命令： 　

img { -ms-interpolation-mode: bicubic; } 或者，Ethan Marcotte的imgSizer.js。 addLoadEvent(function() { var imgs = document.getElementById("content").getElementsByTagName("img"); imgSizer.collate(imgs); });

不过，有条件的话，最好还是根据不同大小的屏幕，加载不同分辨率的图片。有很多方法可以做到这一条，服务器端和客户端都可以实现。

 

另外的解决办法都太繁琐：

function ReImgSize(){

for (j=0;j<document.images.length;j++)

{

document.images[j].width=(document.images[j].width>420)?”420″:document.images[j].width;

}

}

然后在body区域加上onload=”ReImgSize()” 就可以了。经过测试,在Mozilla和IE上通过.。

 

 

img{

max-width:100%;height:auto;

}

 

也可以的

 

详细参见http://www.zreading.cn/ican/2013/05/css-photo-adaptive-display-width/