响应式新首页设备适配(Device Adaptation)小结

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

viewport meta element

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

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

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

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

@viewport css

如:

@viewport {
  width: device-width;
  zoom: 2.0;
}

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

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

<meta name="viewport" content="width=480, initial-scale=2.0, user-scalable=1">
可以转化成以下css
@viewport {
  width: 480px;
  zoom: 2.0;
  user-zoom: zoom;
}

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

@viewport {
    width: device-width;
}  

@media screen and (min-width: 400px) {
    div { color: red; }
}  

@media screen and (max-width: 400px) {
    div { color: green; }
}

不过,@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,.

the same webpage when the initial scale is set to 1.0 on iPhone. Safari on iOS infers the width and height to fit the webpage in the visible area. The viewport width is set to device-width in portrait orientation and device-height in landscape orientation.

设置 <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即可

@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” />是期望中的效果

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

页尾的实现大致如下:
<body>
    <div id="etao-footer">
        content
    </div>
</body>
<style>
#etao-footer {
    background-color: #ccc;
}
</style>
The containing block in which the root element lives is a rectangle called the initial containing block. For continuous media, it has the dimensions of the viewport and is anchored at the canvas origin; it is the page area for paged media. The 'direction' property of the initial containing block is the same as for the root element.

原因是没有给etao-footer定宽,对于根目录下面的 containing block其宽度由viewport的尺寸决定。
iphone下viewport为320,所以看到的效果是background-color只平铺了320px的宽度,解决方法可以针对容器添加个min-width:750px;所以viewport的设置可能会影响页面根元素的宽度,需要注意下。

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

相关 [响应式 首页 设备] 推荐:

响应式新首页设备适配(Device Adaptation)小结

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

响应式新首页Device Adaptation小结

- - UX 一淘体验中心
由于用户浏览器分辨率分布、运营维护成本、全站页面宽度规范等原因,2012年末一淘新首页对1200px、990px、750px(for ipad)这3个尺寸的响应不同布局,期望在ipad下横屏显示990px版本,竖版显示750版本,iphone下显示750版本. 不同设备尺寸的不同显示自然少不了viewport设置,目前.

Responsive Nav:用于小屏幕设备的响应式导航

- - 博客园_梦想天空
  Responsive Nav 是一个很小的. JavaScript 插件,压缩后只有 1.7 KB,可以帮助您实现小屏幕导航切换功能. CSS3 过渡提供最佳性能,它还包含一个“聪明”的解决方法,借助 CSS3 transitions 特性使高度从height: 0 过渡到 height: auto.

提升移动设备响应式设计的8个建议

- - 199IT互联网TMT数据
现在,对于任何种类的网站开发来说,响应式Web设计都不能再局限于纸上谈兵,其是开发阶段的一个关键步骤. 作为设计师和开发人员,我们必须要了解有效响应式设计的重要性以及其在保证优秀终端用户体验方面的作用. 随着web向着移动端逐步发展,现在响应能力对于网站来说已经必不可少. 很多人没能在移动用户兴起时抓住时机进行顺应潮流,因此现在难以保证网站在移动设备上的体验流畅性.

支持触摸设备的响应式HTML5音频播放器 - AudioPlayer.js

- - ITeye博客
日期:2013-5-22  来源: GBin1.com. 如果你希望开发一款支持响应式的HTML5播放器的话,. AudioPlayer.js是一个不错的选择. 它使用HTML5的audio标签帮助你生成一个支持响应式的音频播放器,不使用任何embed代码,图片或者flash,完全使用CSS定义界面.

响应式的WEB设计(三)- 桌面及移动设备的网页性能

- - 博客园_首页
移动设备由于受到带宽、处理器运算速度的限制,因而对网页的性能有更高的要求. 究竟是网页中的何种元素拉低了网页在移动设备中加载的速度呢. 这些元素应该做何处理以提升页面在移动设备中的整体性能. 是否存在一种设计模式可以同时满足移动端及桌面端的页面设计呢. 2、移动设备中网页的性能检测. 3、移动设备网页的性能瓶颈.

响应式网页设计

- - 前端观察
这个话题最近很火爆,我也一直在关注,响应式网页设计和移动互联网密切相关,并因移动终端的丰富和普及而兴盛,并且是一个颇具争议的话题,我今天将和大家探讨下. 上周写了个简单的ppt在组内大概介绍了下,感兴趣的话可以 先看下这个PPT. 在说到这个话题前,我们先看下网页设计和前端开发的现状:. 全球有超过53亿手机用户(包括传统手机).

响应式Web设计

- - 葵中剑's Blog - SwordAir.com
响应式Web设计( Responsive Web Design – RWD)一般是指那些使用CSS3 Media Query特性制作站点,其可以适应不同视窗尺寸的布局. 虽然很早就已经有了类似RWD的概念,但直到最近一年里才开始变得特别流行,各种文章、例子、工具、模板,不断地从无到有,诸如:. 响应式Web设计50个例子和最佳实践.

响应式网页设计

- - IT技术博客大学习
响应式网页设计最初是由 Ethan Marcotte 提出的一个概念:为什么一定要为每个用户群各自打造一套设计和开发方案. Web设计应该做到根据不同设备环境自动响应及调整. 当然响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等,它更像是一种对于设计的全新思维模式;我们应当向下兼容、移动优先.

响应式Web设计

- - 阿里巴巴(中国站)用户体验设计部博客
在设计中经常遇到这几个问题:. 1.想要网站兼容手机、平板电脑、pc,就得为不同的设备定制不同的版本. 2.想要网站的某些页面在宽屏显示器下一行显示更多的内容,又得为宽屏定制一个版本. 3.很多人并不是在全屏的情况下浏览我们的页面,如果让页面随着浏览器宽度改变而相应的调整会不会比较好. 有没有办法能有效解决这些问题呢.