移动Web中图片自适应的两种JavaScript解决方法_javascript技巧

下面是图集类型，需求方要求图片高宽都保持在手机可视视野范围，js代码列在下面：

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

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

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