写在前面：本人刚刚接触移动端开发，希望自己的见解能够帮助到他人，不足之处还望提醒。

1 移动端开发分类

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设置的尺寸大小。

3.3 弹性盒模型

详解点击链接：https://blog.csdn.net/qq_42451979/article/details/80753153

写在最后：以上是我对移动端开发的部分理解，详细内容稍后更新。

移动端开发之Web App开发相关推荐

koa+mysql+vue+socket.io全栈开发之web api篇
原文地址:koa+mysql+vue+socket.io全栈开发之web api篇目标是建立一个 web QQ的项目,使用的技术栈如下: 后端是基于koa2 的 web api 服务层,提供curd ...
C#进行Visio二次开发之Web查看Visio图纸
前面介绍的Visio开发知识,都是基于Winform的Visio的开发知识,图纸的展示都是基于Winform方式展示的.但很多时候,如果能够通过Web方式可以查看最新的图纸信息,那么系统将更加趋向完美 ...
web app开发技巧总结
Web APP开发技巧总结一.META/LINK相关: 1.百度禁止转码通过百度手机打开网页时,百度可能会对你的网页进行转码,往你页面贴上它的广告,非常之恶心.不过我们可以通过这个meta标签来禁 ...
适合前端工作者的iPhone Web App开发
iPhone有着丰富的软件资源,到目前为止,仅在appStore上架的软件就达十多万个,而相比之下,有着10年历史的WM系统却不过只有大约2万个应用程序. 随着ipad和iphone 4的发布,iph ...
java 开发手机web,手机web app开发笔记
各位朋友好,最近自学开发了一个手机Web APP,"编程之路",主要功能包括文章的展示,留言,注册登录,音乐播放等.为了记录学习心得,提高自己的编程水平,也许对其他朋友有点启发,特 ...
Google Web App开发指南
http://www.html5rocks.com/webappfieldguide/case-studies/case-study-intro/ 第一章:什么是Web Apps? 很多人向我问起学习 ...
【知识整理】聊聊web app开发的那些事
一.什么是web app? 根据本人理解,通俗点讲,web app是用前端的HTML5.CSS3.JavaScript借助于适当的web app开发SDK或平台整合开发,可以编译为兼容大多数Andro ...
app开发和web开发_理解现代Web App开发概念的指南
app开发和web开发 Millions of businesses exchange information on the internet and to interact with their t ...
Web App开发技巧
webApp和nativeApp的区别 Native App 开发成本非常大.一般使用的开发语言为JAVA.C++.Objective-C. 更新体验较差.同时也比较麻烦.每一次发布新的版本,都需要做 ...

移动端开发之Web App开发

1 移动端开发分类

1.1 Native App 原生App开发

2 Web App 网页App开发

3 Hybrid App 混合型App开发

2 Viewport视口

2.1 视口

2.2参数说明

2.3 设置方法

3 移动端适配布局

3.1 流体布局+少量响应式

3.2 基于rem的布局

3.3 弹性盒模型

移动端开发之Web App开发相关推荐

最新文章

热门文章