移动端开发之Web App开发

广告位

移动端开发分类 1.1 Native App 原生App开发 优点: (1)用户体验好 (2)性能稳定 (3)…

移动端开发之Web App开发

移动端开发分类

1.1 Native App 原生App开发

优点:

(1)用户体验好

(2)性能稳定

(3)操作速度快

(4)能够访问本地资源(通讯录,相册)

(5)能够设计出色的动效,转场

(6)拥有系统级别的贴心通知或提醒

(7)用户留存率高

缺点:

(1)开发成本高

(2)维护成本高

(3)更新缓慢,根据不同平台,提交–审核–上线流程较复杂。

总的来说,native app开发从android、ios智能手机出现就有了开发技术,性能体验最优,API比较完善,但是学习起来难度比较高,开发成本比较高(跟开发周期相对来说比较长也是有关系的)。

2 Web App 网页App开发

优点:

(1)发版完全自控,随时更新

(2)跨平台,因为本身来说用的是Web的东西,所以可以在任意平台上运行

(3)成本小,Web页面嵌入Webview开发起来速度非常快,一个人就可以轻松搞定

缺点:

(1)性能差

(2)弱网络或无网络条件下体验差

(3)适用有展示类需求的项目,但是如果要实现的功能比较复杂的话就显得力不从心

总的来说,相比Native App,Web App体验中受限于网络环境和渲染性能。Web APP对网络环境的依赖性较大,因为Web APP中的H5页面,当用户使用时,去服务器请求显示页面。如果此时用户恰巧遇到网速慢,网络不稳定等其他环境时,用户请求页面的效率大打折扣,在用户使用中会出现不流畅,断断续续的不良感受。同时,H5技术自身渲染性能较弱:对复杂的图形样式,多样的动效,自定义字体等的支持性不强。因此,应注意以下几点:1.简化不重要的动画/动效;2.简化复杂的图形文字样式;3.减少页面渲染的频率和次数。

3 Hybrid App 混合型App开发

优点:

(1)体验好

(2)稳定性强动态性强

(3)成本相对低跨平台

缺点:对团队技术栈要求相对高性能优化

Hybrid App就是Native结合Web混合开发,Native+JS代码代表作是cordova前身是phonegap,现在移交给Apache,核心JsBridge,JS调Java,Java调JS。因为混合开发,所以体验接近原生、稳定性强而且发版快。

2 Viewport视口

2.1 视口

视口是移动设备上用来显示网页的区域,一般会比移动设备可视区域大,宽度可能是980px或者1024px,目的是为了显示下整个为PC端设计的网页。这样带来的后果是移动端会出现横向滚动条,为了避免这种情况,移动端会将视口缩放到移动端窗口的大小。这样会让网页不容易观看,可以用meta标签,name=”viewport”来设置视口的大小,将视口的大小设置为和移动设备可视区一样的大小。

在移动端用来承载网页的这个区域,就是我们的视觉窗口,viewport(视口),这个区域可以设置高度宽度,可以按比例放大缩小,而且能设置是否允许用户自行缩放。

2.2参数说明

width:宽度设置的是viewport宽度,可以设置device-width特殊值

initial-scale:初始缩放比,大于0的数字

maximum-scale:最大缩放比

minimum-scale:最小缩放比

user-scalable:用户是否可以缩放,yes或no(1或0)

2.3 设置方法

3 移动端适配布局

使用百分比自适应布局(流式布局)同时需要对移动端的viewport视口进行设置,就可以达到适配的目的。

3.1 流体布局+少量响应式

流体布局:使用百分比来设置元素的宽度,元素的高度按实际高度写固定值,流体布局中,元素的边线(border)无法用百分比,可以使用样式中的计算函数calc()来设置宽度,或者使用box-sizing属性将盒子设置为边线计算盒子尺寸。

响应式布局:使用媒体查询的方式,通过查询浏览器的宽度,不同的宽度应用不同的样式块,每个样式块对应的是该宽度下的布局方式,从而实现响应式布局,响应式布局的页面可以适配多种终端屏幕(pc、平板、手机)。

3.2 基于rem的布局

rem指的是参照根节点的文字大小,根节点指的是html标签,设置html标签的大小,其他的元素相关尺寸设置用rem。这样,所有元素都有了统一的参照标准,改变html文字的大小,就会改变所有元素用rem设置的尺寸大小。

感谢阅读

喜欢看小编文章的点个订阅或者喜欢!小编每天都会跟大家分享文章,也会给大家提供web前端学习资料。

关于作者: 疯子程序员

为您推荐

广告位

发表评论