时间:2021-07-01 10:21:17 帮助过:5人阅读
下面是图集类型,需求方要求图片高宽都保持在手机可视视野范围,js代码列在下面:
注意:测试中发现安卓4.0+的系统对window.screen.width属性支持的不好,很多情况在首次加载时返回的屏幕像素不正确。本人的安卓2.3.3系统测试通过,支持该属性。据说,这是安卓系统的bug,可以通过setTimeout设置延时时间来解决这个问题。不过,这个方法,本人怎么测试都行不通。所以干脆还是另寻高明吧。发现window.innerWidth可以担此重任,没有发现兼容问题,ok。
下面是,第二种情况,图文并茂的文章类型。这时候只对图片宽度和手机宽度适应有要求,对高度不做限制,相对容易些。
改造上面的javascript代码,如下:
说明:代码中的resize函数,是捕捉屏幕窗口变化,始终保证图片根据屏幕宽度合理显示。当然了,前提是像我的项目一样,文章直接为富文本格式,图片的父级标签已经设定了text-align:center的居中属性。如果你的文章内容是直接调用第三方的,那么你可以在上面的javascript代码中添加相应的处理语句即可。