本文介绍移动Web中图片自适应的两种常见场景：图集左右滑动浏览与图文混排。通过JavaScript监听窗口大小变化，利用window.innerWidth获取视口宽度，动态计算图片缩放比例，确保图片在屏幕有效范围内居中显示，避免安卓4.0+系统window.screen.width兼容性问题，提升移动端用户体验。
移动Web图片自适应需求分析
本文主要探讨在Web页面中，如何根据手机屏幕尺寸实现图片的自适应居中显示，并针对两种常见情况提供解决方案。在开发配合手机客户端的Web wap页面时，发现文章对图片显示主要有两种重要需求：一是图集类文章，用户仅需左右滑动浏览，最佳体验是让图片缩放后显示在屏幕有效可视区域内，防止因图片过大导致用户需要手动滑动查看，从而降低用户体验；二是图文混排文章，要求图片最大宽度不超过屏幕宽度，高度保持自动。这两种情况在项目中十分常见。有人建议制作图片切割工具，将图片尺寸比例统一设定，但即便这样做，面对各种尺寸的移动设备屏幕，也无法用单一方案解决所有问题。此外，若需求繁多，服务器上需存储大量不同尺寸的图片，这显然不符合实际开发情况。
图集类型图片自适应方案
以下是针对图集类型的处理方案，需求方要求图片的高度和宽度均保持在手机可视视野范围内，相关JavaScript代码如下：
<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.width>30 && 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;
}
}
}
}
}
})
</script>
注意：在测试中发现，安卓4.0及以上系统对window.screen.width属性的支持存在缺陷，许多情况下首次加载时返回的屏幕像素值不正确。本人的安卓2.3.3系统测试通过，支持该属性。据称，这是安卓系统的bug，可通过setTimeout设置延时时间来解决，但本人尝试多次均无法通过此方法解决。因此，转而寻找其他方案，最终发现window.innerWidth可以胜任此任务，且未发现兼容性问题，故采用此方法。
图文混排类型图片自适应方案
以下是第二种情况，即图文并茂的文章类型。此时仅要求图片宽度与手机屏幕宽度适应，对高度不做限制，相对较为简单。对上述JavaScript代码进行改造，结果如下：
<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 image=new Image();
image.src=ImgD.src;
image.onload = function(){
//限制，只对宽高都大于30的图片做显示处理
if(image.width>30 && image.height>30){
if(image.width>_width){
ImgD.width=_width;
ImgD.height=(image.height*_width)/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
}
}
}
})
</script>
说明：代码中的resize函数用于捕捉屏幕窗口大小的变化，始终确保图片根据屏幕宽度合理显示。当然，前提是像我的项目一样，文章直接为富文本格式，且图片的父级标签已设定text-align:center的居中属性。如果你的文章内容是直接调用第三方的，那么你可以在上述JavaScript代码中添加相应的处理语句即可。