南通用友软件-南通万户电子商务有限公司 地址:南通市跃龙南路179号(崇川科技创业园(聚智谷)一楼) 联系人:汤女士 18862981058

用友信息技术

用友UAP马太航:解析移动开发中的响应式布局

添加时间: 2015/7/10 浏览数:2158 作者:南通用友

移动互联占据互联网市场之后,市场上的终端设备日新月异,谷歌眼镜,苹果智能手表等新型穿戴设备相继发布。仅手机一类品种每年的增长量就有400种之多。高分辨率设备也出现在市场上,4k时代刚刚被大家所熟知,5k屏已经悄然出现在市场中。面对如此多的终端设备,给网站设计者,开发者提出了各种严酷的考验。

先来看两组数据,下图为iOS设备分辨率分布,图中包含5种不同分辨率,每种分辨率都有相当多比例的用户群体。

再来看看android设备分辨率分布。这里边android设备只展示有9种屏幕分辨率,每一种分辨率都拥有一定比例的用户群体。与ios合起来至少有10种分辨率,需要页面支撑。

如果按照目前网站设计中多站点方式去支持如此众多的视口,开发和维护工作是非常沉重的。需要更好的设计理念来支撑如此众多的视口。 其实在2010年5月,Ethan Marcotte就提出了响应式布局概念。它是将流式栅格布局,弹性图片,弹性媒体和媒体查询等已有的技术整合起来,目的是为了网页可以不同设备视口。真正的响应式设计方法不仅是根据视口大小改变网页布局,而且要从整体上颠覆当前设计网页的方法.以往先是针对桌面电脑进行固定宽度设计,然后将其缩小并针对小屏幕进行内容重排。

目前,用友UAP认为,应该首先针对小屏幕进行设计,然后逐步增强针对大屏幕的设计和内容。一般可以通过阻止移动浏览器自动调整页面大小、媒体查询以及运用流式布局等技术来实现响应式网页设计。最终支持多种设备,如下图:

第一,阻止移动浏览器自动调整页面大小

使用智能手机浏览桌面端网站时,一般会自动缩放到合适的宽度使视口能够显示整个页面,但是这样会使文字变得很小,浏览内容不方便。可以通过设置meta标签的viewport属性,设定加载网页时以原始的比例显示网页.将这个meta标签加到标签里。

viewport是网页默认的宽度和高度,上面代码的意思是网页宽度默认等于设备宽度(width=device-width),原始缩放比例(initial-scale=1)为1:0,表示支持该特性的浏览器都将会按照设备宽度的实际大小渲染网页。

所有主流浏览器都支持这个设置,包括IE9.对于那些老式浏览器(主要是IE6、7、8),需要使用css3-mediaqueries.js或者respond.js为IE添加Media Query支持。

telfast 60 telfast bula telfast 180 dosage
地址:南通市跃龙南路179号(崇川科技创业园(聚智谷)一楼)
销售热线:188-6298-1058 服务热线:188-6298-1058
备案号:苏ICP备18039487号-5 南通万户电子商务有限公司版权所有
资深专家:QQ 服务QQ:QQ
扫一扫 关注南通用友微信