移动Web开发图片自适应两种常见情况处理文案.doc

本文主要说的是Web中图片根据手机屏幕大小自适应居中显示，图片自适应两种常见情况解决方案。开始吧 在做配合手机客户端的Web wap页面时，发现文章对图片显示的需求有两种特别重要的情况，一是对于图集，这种文章只需要左右滑动浏览，最好的体验是让图片缩放显示在屏幕有效范围 内，防止图片太大导致用户需要滑动手指移动图片来查看这种费力气的事情，用户体验大大降低。二是图文混排的文章，图片最大宽度不超过屏幕宽度，高度可以 auto。这两种情况在项目中很常见。另外，有人说做个图片切割工具，把图片尺寸比例都设定为统一的大小，但即使这样，面对各种大小的移动设备屏幕，也是 无法适用一个统一方案就能解决得了的。而且如果需求太多，那服务器上得存多少份不同尺寸的图片呢？显示不太符合实际。 下面是图集类型，需求方要求图片高宽都保持在手机可视视野范围，js代码列在下面： [javascript] view plaincopy script?type=text/javascript?? $(function(){?? ?? var?imglist?=document.getElementsByTagName(img);?? //安卓4.0+等高版本不支持window.screen.width，安卓2.3.3系统支持?? /*? var?_width?=?window.screen.width;? var?_height?=?window.screen.height?-?20;? ? var?_width?=?document.body.clientWidth;? var?_height?=?document.body.clientHeight?-?20;? */?? var?_width,??? ????_height;?? doDraw();?? ?? window.onresize?=?function(){?? ????doDraw();?? }?? ?? function?doDraw(){?? ????_width?=?window.innerWidth;?? ????_height?=?window.innerHeight?-?20;?? ????for(?var?i?=?0,?len?=?imglist.length;?i??len;?i++){?? ????????DrawImage(imglist[i],_width,_height);?? ????}?? }?? ?? function?DrawImage(ImgD,_width,_height){??? ????var?image=new?Image();??? ????image.src=ImgD.src;??? ????image.onload?=?function(){?? ????????if(image.width30??image.height30){??? ??????? ????????????if(image.width/image.height=?_width/_height){??? ????????????????if(image.width_width){?? ????????????????????ImgD.width=_width;??? ????????????????????ImgD.height=(image.height*_width)/image.width;??? ????????????????}else{??? ????????????????????ImgD.width=image.width;??? ????????????????????ImgD.height=image.height;??? ????????????????}??? ????????????}else{??? ????????????????if(image.height_height){?? ????????????????????ImgD.height=_height;??? ????????????????????ImgD.width=(image.width*_height)/image.height;??? ????????????????}else{??? ????????????????????ImgD.width=image.width;??? ????????????????????ImgD.height=image.height;??? ????????????????}??? ????????????}?? ????????}????? ????}?? ?? }?? ????? })?? /script?? 注意：测试中发现安卓4.0+的