移动站Web开发图片自适应两种常见情况解决方案
本文主要说的是Web中图片根据手机屏幕大小自适应居中显示,图片自适应两种常见情况解决方案。开始吧
在做配合手机客户端的Web wap页面时,发现文章对图片显示的需求有两种特别重要的情况,一是对于图集,这种文章只需要左右滑动浏览,最好的体验是让图片缩放显示在屏幕有效范围内,防止图片太大导致用户需要滑动手指移动图片来查看这种费力气的事情,用户体验大大降低。二是图文混排的文章,图片最大宽度不超过屏幕宽度,高度可以auto。这两种情况在项目中很常见。另外,有人说做个图片切割工具,把图片尺寸比例都设定为统一的大小,但即使这样,面对各种大小的移动设备屏幕,也是无法适用一个统一方案就能解决得了的。而且如果需求太多,那服务器上得存多少份不同尺寸的图片呢?显示不太符合实际。
下面是图集类型,需求方要求图片高宽都保持在手机可视视野范围,js代码列在下面:
<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可以担此重任,没有发现兼容问题,ok。
下面是,第二种情况,图文并茂的文章类型。这时候只对图片宽度和手机宽度适应有要求,对高度不做限制,相对容易些。
改造上面的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代码中添加相应的处理语句即可。
最新文章
- Ngnice-国内ng学习网站
- NHibernate配置
- 12. javacript高级程序设计-DOM2和DOM3
- HDU 4082 Hou Yi&#39;s secret --枚举
- [JavaScript] JS中对Base64的解析
- c#实现无标题栏窗口的拖动
- 设计模式(二)The Observer Pattern 观察者模式
- 全球最低功耗蓝牙单芯片(DA14580)系统架构和应用开发框架分析
- zabbix 布署实践【2 agent安装】
- SSH程序框架的整合(1)
- 一种CListCtrl自绘效果
- phpStorm安装方法
- mac os app 开发
- CH 6201 走廊泼水节题解
- Sql Server 2012 集群配置
- freopen
- extensions
- 【PMP】项目和运营的区别
- Scala学习笔记——函数和闭包
- [svc]Linux中Swap与Memory内存简单介绍
热门文章
- mybatis 批量将list数据插入到数据库
- antd源码分析之——标签页(tabs 3.Tabs的滚动效果)
- 用单元测试来调试SilverFish AI
- redis的服务器信息状态信息查看
- 面向对语法读取mysql数据库数据例:$db->;query($sql)、$result->;fetch_array()
- openstack部署dashboard
- uni-app相关
- 论UT阶段重要性
- 【POJ - 3641】Pseudoprime numbers (快速幂)
- Nmap之用法