移动web图像自适应的两种javaｓｃｒｉｐｔ解决方案

本文主要介绍了两种适应手机屏幕尺寸的网络常见问题解决方案。

随着手机客户端WAP网站做网页，发现有两个特别重要的图像显示的需求，一为阿特拉斯，这篇文章只需要左右滑动的最佳浏览体验是放大显示在有效范围内的画面，防止图片太大，用户需要滑动你的手指移动的图片查看这方面的努力，用户体验大大降低。二是图形和文字混合的一篇文章，图片的宽度最大不超过屏幕的宽度和高度可自动。这两个案例项目中是常见的。另外，有人说，一张图片切削工具是用来设置图片的大小比例，大小均匀，但即使是这样，我对于各种移动设备屏幕，不可能统一应用解决方案，如果需求太多，服务器上有多少种不同大小的图片呢这个显示器不太实用。

下面是阿特拉斯类型，它要求图片的宽度保持在移动电话的视野中，JS代码列在下面。



$（函数（）{（））

无功imglist = document.getelementsbytagname（IMG）；
/ /屏幕分辨率的宽不支持安卓4.0版本Android 2.3.3支持系统
*
无功_width =屏幕分辨率的宽；
无功_height = window.screen.height - 20；

无功_width = document.body.clientwidth；
无功_height = document.body.clientheight - 20；
* /
无功_width，
_height；
DoDraw（）；

window.onresize =函数（）{
DoDraw（）；
}

功能dodraw（）{
_width = window.innerwidth；
_height = window.innerheight - 20；
对于（var i = 0，len = imglist.length；我< len；i++）{
DrawImage（imglist {我}，_width，_height）；
}
}

功能DrawImage（imgd，_width，_height）{
新图像（）；
SRC = imgd.src图像；
image.onload =函数（）{
如果（图像宽度> 30图像高度> 30）{

如果（图像宽度/图像。高> = _width / _height）{
如果（图像宽度> _width）{
ImgD。宽度= _width；
ImgD。高度=（图像。高度×_width） / image.width；
其他{ }
ImgD。宽度= image.width；
ImgD。高度= image.height；
}
其他{ }
如果（图像。高> _height）{
ImgD。高度= _height；
ImgD。宽度=（图像宽度* _height） / image.height；
其他{ }
ImgD。宽度= image.width；
ImgD。高度= image.height；
}
}
}
}

}

}）







注：在测试中，发现安卓4.0的系统不支持屏幕分辨率的宽属性。很多情况下是不正确的返回时第一次。我的Android 2.3.3系统测试通过支持这一特性。据说这是Android系统的漏洞，可以用来设定延迟时间通过setTimeout来解决这个问题。不过，这个方法，我没有测试所有的方式，只是寻找它。发现window.innerwidth可以把繁重的任务，不存在兼容性问题，好的。



以下是第二种情况，文章的类型与图片相同，此时只有图片的宽度和手机的宽度才能适应身高的要求是不受限制的，比较容易。

转换上面的Javaｓｃｒｉｐｔ代码，如下所示：



$（函数（）{（））
无功imglist = document.getelementsbytagname（IMG）；
/ /屏幕分辨率的宽不支持安卓4.0版本Android 2.3.3支持系统
无功_width；
DoDraw（）；

window.onresize =函数（）{
捕捉屏幕窗口的变化，根据合理的屏幕宽度保持图片
DoDraw（）；
}

功能dodraw（）{
_width = window.innerwidth；
对于（var i = 0，len = imglist.length；我< len；i++）{
DrawImage（imglist {我}，_width）；
}
}

功能DrawImage（imgd，_width）{
新图像（）；
SRC = imgd.src图像；
image.onload =函数（）{
限制，只对宽度和高度都超过30的图片进行显示处理。
如果（图像宽度> 30图像高度> 30）{
如果（图像宽度> _width）{
ImgD。宽度= _width；
ImgD。高度=（图像。高度×_width） / image.width；
其他{ }
ImgD。宽度= image.width；
ImgD。高度= image.height；
}

}
}

}

}）







说明：代码中的调整功能是捕捉屏幕窗口的变化，始终保证画面根据屏幕宽度以合理的方式显示出来。当然，前提是，喜欢我的项目，本文直接丰富的文本格式，和图片的父标签设置文本中属性对齐：center.if你的文章是直接由第三方调用，那么你可以添加相应的处理语句的Javaｓｃｒｉｐｔ代码以上。