前端移动端主流分为以下三种：Native App ，Hybrid App ，Web App
1 移动端开发分类
1.1 Native App 原生App开发
优点：
（1）用户体验好
（2）性能稳定
（3）操作速度快
（4）能够访问本地资源（通讯录，相册）
（5）能够设计出色的动效，转场
（6）拥有系统级别的贴心通知或提醒
（7）用户留存率高
缺点：
（1）开发成本高
（2）维护成本高
（3）更新缓慢，根据不同平台，提交–审核–上线流程较复杂。
总的来说，native app开发从android、ios智能手机出现就有了开发技术，性能体验最优，API比较完善，但是学习起来难度比较高，开发成本比较高（跟开发周期相对来说比较长也是有关系的）。
1.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.减少页面渲染的频率和次数。
1.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 弹性盒模型
4 移动端端跨平台开发框架
移动端跨平台框架之争，其实主要是 谷歌/脸书/微软 三家争霸。
在移动端开发项目中。开发资源不够时，同时由两个团队维护安卓和IOS两套原生APP是成本很高的。此时，就需要选择一个同时支持多平台的客户端开发框架，能够使用一套代码，编译出多平台的APP。
这样一方面能够缩减开发人数，节省开发成本。另一方面由于代码统一，避免了不同平台版本分支，导致的用户体验差异。
如果使用非前端语言进行开发，可以使用Flutter，MAUI 等，Flutter需要学习一门新的 Dart 语言，不过语言特性浅显易懂，学习难度也不大。 MAUI是C#开发，适合相应的微软技术栈的团队。目前前端JS相关的工具，主要是uni-app（VUE技术栈） / Taro（React技术栈） / React Native（React技术栈） / Cordova / HTML5
4.1 React Native
官网地址： https://reactnative.dev/ 项目地址： https://github.***/facebook/react-native
React Native看姓就知道是谁推出的了，不多说了。
也有一些框架支持代码编译为 React Native, 来提供客户端开发支持，如京东的小程序开发框架 taro ，以及 Vue Native （停止维护）
4.2 UNI-APP / Taro
uni-app 和 taro 都是主打跨平台的小程序开发框架，只不过是一个用Vue开发，一个使用 React。 uni-app 由 dcloud 开发，大概是国内推出小程序概念的最早公司了，甚至早于微信小程序。官方提供的框架，支持直接编译为安卓和ios应用。 taro 由京东开发，上面提过，是编译为 React Native 来提供移动APP支持。
4.3 Cordova
全称Apache Cordova，是由Nitob1在2009年创建和推出的移动开发框架。官网地址：https://cordova.apache.org/。它当初主要想解决Android，iOS，BlackBerry以及微软的Phone四个平台的跨平台问题。只是到现在只剩下android和iOS了。
该框架的主要设计思路是提供硬件设备API接口，通过简单且又在Web端适用的JavaScript语言完成调用，实现相应功能。
从架构的本质来说，是在原生基础上加了一个Cordova的容器，在该容器上使用简单易用的JavaScript语言，实现移动端的UI界面的统一。这在当时来说，是往跨平台方向迈进了一大步。这里UI界面采用JavaScript语言还有一个好处：和Web端统一起来。从而实现三端（iOS端、安卓端，Web端）统一。
然而，Cordova也有一些不足：
(1).Cordova在自定义绘制视图和布局等复杂界面上，存在着很大的困难，一时还实现不了。所以Cordova一般适用于简单的界面。
(2).Cordova的更新与操作系统的更新，差距很明显，例如最新的Cordova支持Android 10.但Android已经发展到12了。
(3).Cordova的受欢迎程度正在逐年下降，2019-2021年使用Cordova的软件开发人数量下降到16%。
基于以上原因，Cordova正在被其他的移动框架所替代。
这里再补充下项目经验：之前接触过Cordova。在使用过程中，确实感觉Cordova接口简单粗放，调用设备API接口，缺少太多的异常保护。
再者，性能也不是很良好，一个2000人的企业组织架构数据，在首次打开的时候，必然会出现一段时间的白屏。
4.4 HTML5
HTML5简称H5，这个也是移动端跨平台运用比较多的一个框架。
从整体架构上看，H5框架，就是在移动端上，通过UIWebView控件打开一个HTML5页面，HTML5页面属于前端开发，移动端负责交互以及原生开发。当HTML5页面与原生要进行事件响应或数据交换时（如按钮点击，从原生获取工号、token等数据），一般通过JSBridge进行交互。
这种方式，个人认为在所有的跨平台框架中，应该最简单的（前面的Cordova，还需要学习Cordoava框架），只需要一个前端开发人员完成HTML5页面开发。当需要与原生进行交互时，通过WebViewJavascriptBridge或者JavaScriptCore库，进行注册或回调。
从性能方面来说，H5和Cordova框架性能相差无几。交互方面都是以接口的方式进行，UI界面方面采用JavaScript的渲染，所以性能方面差不多。
补充下项目经验：H5框架实现了前端、移动端UI界面的分离，即前端做前端的界面，移动端完成移动端的功能，两者相互独立。只有到了需要交互之时，才采用JSBridge进行通讯。
它的不足就是JSBridge不稳定，还包括iOS端和安卓端接口不兼容（项目中一直被前端开发人员抱怨）。面对这些问题，当时也是没有很好的方案去解决。
