全文预览已结束
下载本文档
版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
本文主要说的是Web中图片根据手机屏幕大小自适应居中显示,图片自适应两种常见情况解决方案。开始吧在做配合手机客户端的Web wap页面时,发现文章对图片显示的需求有两种特别重要的情况,一是对于图集,这种文章只需要左右滑动浏览,最好的体验是让图片缩放显示在屏幕有效范围 内,防止图片太大导致用户需要滑动手指移动图片来查看这种费力气的事情,用户体验大大降低。二是图文混排的文章,图片最大宽度不超过屏幕宽度,高度可以 auto。这两种情况在项目中很常见。另外,有人说做个图片切割工具,把图片尺寸比例都设定为统一的大小,但即使这样,面对各种大小的移动设备屏幕,也是 无法适用一个统一方案就能解决得了的。而且如果需求太多,那服务器上得存多少份不同尺寸的图片呢?显示不太符合实际。下面是图集类型,需求方要求图片高宽都保持在手机可视视野范围,js代码列在下面:javascript view plaincopy1. 2. $(function()3. 4. varimglist=document.getElementsByTagName(img);5. /安卓4.0+等高版本不支持window.screen.width,安卓2.3.3系统支持6. /*7. var_width=window.screen.width;8. var_height=window.screen.height-20;9. 10. var_width=document.body.clientWidth;11. var_height=document.body.clientHeight-20;12. */13. var_width,14. _height;15. doDraw();16. 17. window.onresize=function()18. doDraw();19. 20. 21. functiondoDraw()22. _width=window.innerWidth;23. _height=window.innerHeight-20;24. for(vari=0,len=imglist.length;i30&image.height30)34. 35. if(image.width/image.height=_width/_height)36. if(image.width_width)37. ImgD.width=_width;38. ImgD.height=(image.height*_width)/image.width;39. else40. ImgD.width=image.width;41. ImgD.height=image.height;42. 43. else44. if(image.height_height)45. ImgD.height=_height;46. ImgD.width=(image.width*_height)/image.height;47. else48. ImgD.width=image.width;49. ImgD.height=image.height;50. 51. 52. 53. 54. 55. 56. 57. )58. 注意:测试中发现安卓4.0+的系统对window.screen.width属性支持的不好,很多情况在首次加载时返回的屏幕像素不正确。本人的安卓 2.3.3系统测试通过,支持该属性。据说,这是安卓系统的bug,可以通过setTimeout设置延时时间来解决这个问题。不过,这个方法,本人怎么 测试都行不通。所以干脆还是另寻高明吧。发现window.innerWidth可以担此重任,没有发现兼容问题,ok。下面是,第二种情况,图文并茂的文章类型。这时候只对图片宽度和手机宽度适应有要求,对高度不做限制,相对容易些。改造上面的javascript代码,如下:javascript view plaincopy1. 2. $(function()3. varimglist=document.getElementsByTagName(img);4. /安卓4.0+等高版本不支持window.screen.width,安卓2.3.3系统支持5. var_width;6. doDraw();7. 8. window.onresize=function()9. /捕捉屏幕窗口变化,始终保证图片根据屏幕宽度合理显示10. doDraw();11. 12. 13. functiondoDraw()14. _width=window.innerWidth;15. for(vari=0,len=imglist.length;i30&image.height30)26. if(image.width_width)27. ImgD.width=_width;28. ImgD.height=(image.height*_width)/image.width;29. else30. ImgD.width=image.width;31. ImgD.height=image.height;32. 33. 34. 35. 36. 37. 38. 39. )40. 说明:代码中的resize函数,是捕捉屏幕窗口变化,始终保证图片根据屏幕宽度合理显示
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 甘肃省武威市凉州区武威第二十五中学2023-2024学年九年级下学期期中数学试题(无答案)
- 航空客运税委托缴税服务协议书
- 按期支付结算款的催告函(结算后的催款)(联系单)
- 在职表现证明
- 设备安全管理
- 小学生意外伤害的预防与急救6
- 有关预防火灾班会课
- 感冒的种类和预防治疗模板
- 班级卫生方面总结报告
- 软件销售服务合同范本
- 国产游戏对外传播中国文化的现实问题与创新经验
- 四川省公需科目(2023年度数字经济与驱动发展)考试题库及答案
- 2023年天津市普通高中学业水平考试合格性考试通用技术(含答案)
- 个人理财理论与实务李杰辉课后参考答案
- 扬州市八年级生物会考模拟试卷
- 四川省成都市双流区2022-2023学年五下数学期末质量跟踪监视模拟试题含答案
- 河北省秦皇岛市北戴河区2022-2023学年六年级下学期小升初真题精选数学试卷含答案
- 税法常识速查速用大全集:案例应用版(增订3版)
- 施乐复印机维修代码
- 浅论我国数字化教育资源现状及发展策略
- 江苏省南京市鼓楼区2021-2022三年级数学下册期末试卷+答案
评论
0/150
提交评论