移动Web开发图片自适应两种常见状况解决方案

本文主要说的是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 p_w_picpath=new Image();
    p_w_picpath.src=ImgD.src;
    p_w_picpath.onload = function(){
        if(p_w_picpath.width>30 && p_w_picpath.height>30){

            if(p_w_picpath.width/p_w_picpath.height>= _width/_height){
                if(p_w_picpath.width>_width){
                    ImgD.width=_width;
                    ImgD.height=(p_w_picpath.height*_width)/p_w_picpath.width;
                }else{
                    ImgD.width=p_w_picpath.width;
                    ImgD.height=p_w_picpath.height;
                }
            }else{
                if(p_w_picpath.height>_height){
                    ImgD.height=_height;
                    ImgD.width=(p_w_picpath.width*_height)/p_w_picpath.height;
                }else{
                    ImgD.width=p_w_picpath.width;
                    ImgD.height=p_w_picpath.height;
                }
            }
        }
    }

}

})
</script>

注意：测试中发现安卓4.0+的系统对window.screen.width属性支持的很差，不少状况在首次加载时返回的屏幕像素不正确。本人的安卓2.3.3系统测试经过，支持该属性。听说，这是安卓系统的bug，能够经过setTimeout设置延时时间来解决这个问题。不过，这个方法，本人怎么测试都行不通。因此干脆仍是另寻高明吧。发现window.innerWidth能够担此重任，没有发现兼容问题，ok。



下面是，第二种状况，图文并茂的文章类型。这时候只对图片宽度和手机宽度适应有要求，对高度不作限制，相对容易些。
改造上面的javascript代码，以下：

[javascript] view plaincopy

<script type="text/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 < len; i++){
        DrawImage(imglist[i],_width);
    }
}

function DrawImage(ImgD,_width){
    var p_w_picpath=new Image();
    p_w_picpath.src=ImgD.src;
    p_w_picpath.onload = function(){
        //限制，只对宽高都大于30的图片作显示处理
        if(p_w_picpath.width>30 && p_w_picpath.height>30){
            if(p_w_picpath.width>_width){
                ImgD.width=_width;
                ImgD.height=(p_w_picpath.height*_width)/p_w_picpath.width;
            }else{
                ImgD.width=p_w_picpath.width;
                ImgD.height=p_w_picpath.height;
            }

        }
    }

}

})
</script>

说明：代码中的resize函数，是捕捉屏幕窗口变化，始终保证图片根据屏幕宽度合理显示。固然了，前提是像个人项目同样，文章直接为富文本格式，图片的父级标签已经设定了text-align:center的居中属性。若是你的文章内容是直接调用第三方的，那么你能够在上面的javascript代码中添加相应的处理语句便可。

本文来源：http://blog.csdn.net/freshlover/article/details/9720515