移动web中图片自适应的两种javascript解决要领

来源: 电脑维修教程   阅读:     发表时间:

移动web中图片自适应的两种javascript解决要领,本文针敌手机站点中的图片自适应问题,给出了图集解决要领和单篇文章的解决要领,需要的伴侣可以参考下 本

移动web中图片自适应的两种javascript解决要领,本文针敌手机站点中的图片自适应问题,给出了图集解决要领和单篇文章的解决要领,需要的伴侣可以参考下

本文主要说的是web中图片按照手机屏幕巨细自适应居中显示,图片自适应两种常见情况解决方案。开始吧

在做配合手机客户端的web wap页面时,发明文章对图片显示的需求有两种出格重要的情况,一是对付图集,这种文章只需要左右滑动浏览,最好的体验是让图片缩放显示在屏幕有效范畴内,防备图片太大导致用户需要滑动手指移动图片来检察这种费力气的事情,用户体验大大降低。二是图文混排的文章,图片最大宽度不凌驾屏幕宽度,高度可以auto。这两种情况在项目中很常见。另外,有人说做个图片切割东西,电脑维修技术,把图片尺寸比例都设定为统一的巨细,但即使这样,面对各种巨细的移动设备屏幕,也是无法适用一个统一方案就能解决得了的。并且如果需求太多,那处事器上得存几多份差异尺寸的图片呢?显示不太符合实际。

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

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

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

以上是:解决移动web中图片自适应的两种javascript解决要领问题的详细资料教程

?
热门链接: 机顶盒 | 主板维修 | 声卡怎么安装 | 路由器怎么设置 | 电脑内存维修技术 | 维修大全?| 主板维修资料 | 电脑声卡音响故障维修 | 内存 | 显示器 | 电源维修教程 | cpu | 硬盘 | 显卡 |win8操作系统教程|linux操作系统教程|ubuntu操作系统教程|mac苹果操作系统教程|execl教程
友情链接: ?苹果手机维修?| 更多...