注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

cooljun的博客

>>静静的心里 ,都有一道最美丽的风景<<

 
 
 

日志

 
 

响应式布局移动设备适配  

2013-07-11 12:19:53|  分类: javascript |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

由于用户浏览器分辨率分布、运营维护成本、全站页面宽度规范等原因,2012年末一淘新首页对1200px、990px、750px(for ipad)这3个尺寸的响应不同布局,期望在ipad下横屏显示990px版本,竖版显示750版本,iphone下显示750版本。不同设备尺寸的不同显示自然少不了viewport设置,目前W3C针对viewport的规范还处于草案阶段,有2种方式可以设置页面的viewport,viewport meta标签和@viewport css方式。

viewport meta element

1
<meta name="viewport" content="width=device-width,initial-scale=1.0">

该viewport meta支持以下6个属性,ios对viewport meta的实现对比W3C规范草案

safari的实现W3C规范草案
可视区域的宽度,默认是980px,取值区间[200,10000];ios 1.0及以上支持可视区域的宽度,取值区间[1,10000]
可视区域的高度,默认为根据设备的宽高比再根据宽度计算出,取值范围为[223,10000];ios 1.0及以上支持可视区域的高度,取值区间为[1~10,000]
初始化缩放比例,默认根据可显示区域适应页面大小计算出的,取值区间为[minimum-scale,maximum-scale];ios 1.0及以上支持初始化缩放比例,取值区间[0.1, 10]
最小缩放比例,默认0.25,取值区间为[>0,10];ios 1.0及以上支持最小缩放比例,取值区间为[0.1, 10]
最大缩放比例,默认5.0,取值区间为[>0,10];ios 1.0及以上支持最大缩放比例,取值区间为[>0,10]
是否允许用户手动缩放,默认yes,不允许为no;ios 1.0及以上支持是否允许用户手动缩放,yes or no

属性
widthheightinitial-scaleminimum-scalemaximum-scaleuser-scalable

viewport meta方式大部分移动浏览器都支持,如:safariffieopera……

@viewport css

1
2
3
4
@viewport {
  width: device-width;
  zoom: 2.0;
}

w3c草案中@viewport 支持以下属性:

viewport meta方式和@viewport是可以相互转化的,估计以后@viewport是要替代viewport meta的。如:

1
2
3
4
5
6
7
<meta name="viewport" content="width=480, initial-scale=2.0, user-scalable=1">
可以转化成以下css
@viewport {
  width480px;
  zoom: 2.0;
  user-zoom: zoom;
}

而且@viewport可以和media query联用,天造地设的一双呀,这样可以针对不同的终端尺寸设置不同的viewport。

但是,@viewport目前safari并不支持,Opera Mobile 11ie10支持@viewport,但需要加私有前缀(-o-viewport、-ms-viewport),其他浏览器均不支持

问题一:ipad下横版和竖版如何显示不一样的尺寸

设计师分别对1200px/990px/750px三个尺寸进行响应式设计,最终效果如下:

pc宽屏版1200px

ipad横版990px

ipad竖版750px

默认不设置viewport,测试结果如下:

ipad横版

ipad竖版

iphone竖版

结果发现左右2边都有大片的空白,原因是safari默认viewport的width是980px,js检测当前viewport确实是980px,1200、990、750待响应的三个尺寸在980的容器中,所以显示出是750px的设计在980px的容器中居中的效果。
这不是想要的效果,众所周知,ipad的分辨率是1024×768,所以其横版能显示990的设计效果,竖版显示750的设计效果,既然viewport的默认宽度是980,那就试试改变viewport的width。

设置<meta name=”viewport” content=”width=device-width“> 测试结果如下:

ipad横版

ipad竖版

iphone竖版

viewport设置成width=device-width后,不管横版还是竖版viewport都是768px;理论上横版的最大分辨率为1024,并没有显示990px的效果。测试发现,device-height为1024px,device-width的宽度并不会随着ipad横向还是竖向而改变,想要横版viewport设置为device-height,竖版时设置为device-width,可以设置initial-scale,.

设置 <meta name=”viewport” content=”initial-scale=1, maximum-scale=2, minimum-scale=1″ /> 测试结果如下:

初始化不允许缩放设置后,并设置最大最小缩放比例,如果不设置,会导致横版切换到竖版时,页面出现横向滚动条,因为被放大了,设置最大缩放比例后ipad下能达到预期中的效果:

ipad横版

ipad竖版

不过iphone下的就只能看到页面左上角一小部分了,如何解决呢,继续下面的问题

iphone

问题二:iphone初始化显示不全

<meta name=“viewport” content=“initial-scale=1, maximum-scale=2, minimum-scale=1” />

上面的设置ipad上显示正常,因为initial-scale=1初始化的缩放比例是1,而iphone的此时的viewport width是320,所以只能显示页面左上角320×480的区域。
要实现iphone下面,全屏显示750的效果,根据上面的测试,设置<meta name=“viewport” content=“width=device-width” />即可

如何实现不同设备不同viewport设置呢?

方法1:服务端加个user agent的判断,如果是ipad就显示上面特殊的meta设置。
但是服务端判断user agent也有个缺点,不方便枚举出所有平板电脑的user agent,平板电脑日新月异,维护这么多user agent也是个头疼的事情,不过有个开源的机型库wurfl,目前一淘无线的项目中也使用这个库。

方法2:js判断user agent,切换meta,这个肯定不如服务端判断好。

方法3:css @viewport,这是@viewport的天职;可惜safari还不支持。
针对一淘首页这种情况,应该针对小于750px的设备特殊设置@viewport即可

1
2
3
4
5
@media screen and (maxwidth < 749px) {
   @viewport {
      width: device-width;
   }
}

找了下meta viewport的相关属性,没有能适配ipad iphone的相关属性;@viewport safari不支持,最后只能使用方法1在服务端判断设置不同的viewport meta。

问题三:页尾背景显示不全

iphone下设置&tt;meta name=“viewport” content=“width=device-width” />是期望中的效果

但是拖动到下面发现页尾背景显示不全

页尾的实现大致如下:

1
2
3
4
5
6
7
8
9
10
<body>
    <div id="etao-footer">
        content
    </div>
</body>
<style>
#etao-footer {
    background-color#ccc;
}
</style>

原因是没有给etao-footer定宽,对于根目录下面的containing block其宽度由viewport的尺寸决定。

iphone下viewport为320,所以看到的效果是background-color只平铺了320px的宽度,解决方法可以针对容器添加个min-width:750px;所以viewport的设置可能会影响页面根元素的宽度,需要注意下。

最后总结下,设备适配设置meta viewport相关属性即可,不同设备适配需要服务端判断user agent,更好的设置方式是@viewport,但是safari不支持,所以目前还是meta viewport方式靠谱,设置viewport后可能对页面根目录下的元素宽度有影响

无觅相关文章插件,快速提升流量

本文链接:? http://www.csswang.com/html/3565.html

转载请注明本文来源出处。

  评论这张
 
阅读(14)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018