|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
除了在程序加载的时候把我的view加载到他上目前我还没用到过其他的苹果一直很推崇MVC的程序结构视图模型控制器简单说就是视图负责显示内容模型负责所有数据的保存结构或者一些其他数据操作控制器是用来协调视图和模型举车的发动机系统的例子天下局限内挪动设备的利用数目在一日千里。面临在超过多个分歧设备上创立优秀web体验的应战,如今已存在多种办理计划。可是关于任何一个给定的项目,这些办理计划中哪一个是最符合的?为了回覆这个成绩,《挪动优先》作者Luke以Bagcheck使用作为案例(注:Bagcheck是一家处置搜刮与发明营业的立异型企业),注释了选择分离计划挪动版和桌面版面前的缘故原由,并经由过程对照提炼出四个优化挪动Web产物的倡议。全文以下:
自己是呼应式Web计划(ResponsiveWebDesign)理念的反对者和粉丝。但常常有人如许问我:为何我们还要为Bagcheck独自构建一个自力的挪动版本,而不利用流体网格(fluidgrids),弹性图片(flexibleimages)和媒体查询(mediaqueries)等办法来为我们的挪动用户供应一个呼应式Web办理计划?
关于我们的Bagcheck站点来说,网站功能和网站开辟速率是两个相当主要的成绩。我们所做的决意中,良多都是为了使网站功能和开辟速率二者都尽量的快(究竟我们是一家新建立的企业)。作为我们存眷网站功能的一部分,我们也很注意“甚么才是必需的”如许的理念。这意味着我们必要向分歧设备大概用户出现一些他们必要的工具。我们乐于做一些优化事情。利用两重模板体系(dualtemplatesystem)我们就能够从以下多个方面举行优化,好比资本按次(sourceorder),媒体(media),URL布局和使用程序计划。
最后我们以命令行接口(command-lineinterface)的情势构建Bagcheck,在此基本之上我们创立了一个挪动Web体验版的Bagcheck,接着很快就开辟出了一个桌面Web体验版的Bagcheck。如许的历程极可能也影响到了我们所利用的开辟办法。
别的值得一提的是,固然本人可以胜任编码事情,但我次要是一个计划师。由于我存眷的核心是计划要素,以是在这篇文章里会只管多的包括一些手艺层面的资本链接,假如你有更多的资本和完成设法,从速发给我吧!
资本按次(SourceOrder)
呼应式Web计划(ResponsiveWebDesign)最为中心的部分是,将不异的HTML代码使用到分歧的设备下面来,而且依据详细设备本身的功能来静态调剂(次要是经由过程CSS)表面显现。HTML标志有一个资本按次,这个资本按次一般划定Web页面怎样被扫瞄器衬着。只管可使用JavaScript和CSS手艺来改动HTML元素的地位结构,但想以一种牢靠的体例在多种分歧设备下面举行HTML元素重定位则十分具有应战性。
就拿网站导航菜单这个复杂的例子来讲吧,关于那些具有较年夜屏幕和鼠标/键盘等输出的设备来讲,将导航菜单安排到网页的顶部是很罕见的做法,其缘故原由有以下几个方面:
- 设备屏幕具有充足多的空缺区,页面实践内容不成能被挤出屏幕以外。
- 一般必要经由过程一些关头的种别和举措汇合来决意在网站上显现甚么内容
- 当这些关头的分类和举措汇合与屏幕/扫瞄器的边沿对齐时,会见他们的速率大概会更快一些。将网站的全体导航放在在网页顶部是很成心义的,以是标志资本按次就成为起首得思索的成绩。
但是在那些有着校小屏幕而且触摸作为输出的设备,将网站的全体导航放在网页底部会加倍公道一些,这是由于:
- 小屏幕设备没有充足多的空缺地区,招致网页的实践内容被网站的全体导航按钮挤出屏幕以外。
- 关于小屏幕和低带宽的设备来讲,相对网站的导航功效,用户更存眷的是网站内容的当即会见。
- 人类工程学的要素使得用户更简单在屏幕底部点击到他们感乐趣的方针。
以是关于挪动设备来说,将网站的全体导航按钮安排在网页的底部长短常公道的做法,如许做就意味着菜单标志(menumarkup)在资本按次中极可能是排在最初面的。当在分歧设备上利用不异的HTML代码时,资本按次不成能被改动。利用两重模板体系,我们在构建Bagcheck的时分就能够供应分歧的标志,因而在挪动设备上就会有分歧的资本按次。下图展现的是我们为挪动设备和桌面设备天生的两种分歧的UI界面。
<br>
固然你也能够利用其他办理计划,不必供应分歧的HTML代码也能够到达类似的效果。Box-direction可以反转条目列表的按次而不会影响到资本标志按次。你也能够实验利用display:table的办法来依据设备屏幕的实践巨细从头天生内容显现和网站导航。这些办法大概会更合适你,就看你的需求了。
媒体(Media)
呼应式Web计划别的一个办法是利用弹性图片(flexibleimages)和视频。当被设置为添补他们容器巨细的格局的时分,弹性图象可以依据扫瞄器视图中的可用空缺区来静态调剂本人的巨细。
在较年夜的扫瞄器视图中,弹性图片能够经由过程显现本身的原始巨细来添补更多的空缺地区。在较小的扫瞄器视图中,不异的图片能够缩放本身巨细从而占用较少的空缺地区。为了完成如许的效果,扫瞄器必要一些较年夜的图片,这些图片不论是在缩小大概减少的时分看起来都要有不错的效果。
如今的成绩是,图象越年夜,文件的巨细就越年夜。固然并非一切的Web扫瞄器都以他们的原始巨细来显现图象,但扫瞄器必要下载全部图片文件,如许会很快招致低功能,除非如许做:
- 分离利用CSSMediaQueries,背景图片不显现,和不要加载仅仅为较年夜扫瞄器视图筹办的年夜图等办法。这类办法关于指定图片标签(imagetags)的那些图片是有效的,仅仅对利用CSS图片背景的那些图片无效果,如许就限定了此办法的合用性。
- 你可使用像呼应式图片(ResponsiveImages)如许的办理计划,这类办法依附Javascript言语来将HTML标志的小图片依据扫瞄器视图巨细的增添交换成较年夜的图片。禁用Javascript和cookie功效的扫瞄器只可以显现响应的小图片。
- 实验相似noscripttag如许的办法,来制止不用要的图片加载。
- 利用服务器真个办理计划来检测会见你的站点的设备,而且只传送一些需要的工具。
埋没在这些办理计划上面的不异理念是,利用mediaqueries,背景图片,JavaScript大概服务器真个办理计划等办法来仅向设备出现需要的工具。这类办法能够明显地削减文件传输巨细而且进步网站功能。
举个例子来说,Bagcheck的挪动优化模板为每一个列表上的项目供应50 |
|