下面是图集类型,需求方要求图片高宽都保持在手机可视视野范围,js代码列在下面:
$(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; i30 && image.height>30){ 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; } } } } } })
注意:测试中发现安卓4.0+的系统对window.screen.width属性支持的不好,很多情况在首次加载时返回的屏幕像素不正确。本人的安卓2.3.3系统测试通过,支持该属性。据说,这是安卓系统的bug,可以通过setTimeout设置延时时间来解决这个问题。不过,这个方法,本人怎么测试都行不通。所以干脆还是另寻高明吧。发现window.innerWidth可以担此重任,没有发现兼容问题,ok。
下面是,第二种情况,图文并茂的文章类型。这时候只对图片宽度和手机宽度适应有要求,对高度不做限制,相对容易些。
改造上面的javascript代码,如下:
$(function(){ var imglist =document.getElementsByTagName("img"); //安卓4.0+等高版本不支持window.screen.width,安卓2.3.3系统支持 var _width; doDraw(); window.onresize = function(){ //捕捉屏幕窗口变化,始终保证图片根据屏幕宽度合理显示 doDraw(); } function doDraw(){ _width = window.innerWidth; for( var i = 0, len = imglist.length; i