通友时代——用友软件北京客户服务中心
您当前位置:用友软件官网 > 用友新闻 >
用友UAP马太航:解析移动开发中的响应式布局
用友UAP马太航:解析移动开发中的响应式布局   用友uap,用友响应式布局,移动互联

移动互联占据互联网市场之后,市场上的终端设备日新月异,谷歌眼镜,苹果智能手表等新型穿戴设备相继发布。仅手机一类品种每年的增长量就有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支持.


文章可能无法解答所有疑惑,对用友软件培训用友软件教程、用友软件报价有任何疑问请拨打
电话:400-163-2008 或者联系客服QQ咨询
用友软件在线客服
用友u8财务会计软件
用友u8管理会计软件
用友u8人力资源软件
用友erp-u8管理软件
用友u8进销存/供应链软件
用友u8生产制造软件
用友U8-CRM客户关系管理软件
用友致远OA协同办公软件V5-A8
用友致远OA移动协同办公软件
用友致远A8-m协同管理软件
用友致远A6-m协同管理软件
用友BQ商业智能平台
在线试用

用友北京钻石级服务商:400-163-2008