1.APP类型
1.1 Native APP
Native APP又称原生APP，就是我们平时说的手机应用软件。
原生APP 是针对IOS、Android、Windows等不同的手机操作系统要采用不同的语言和框架进行开发出来的，通常是由“服务器数据+APP应用客户端”两部份构成。
实现技术：
iOS: Object C或者 swift Android: java 优缺点
优点： 体验好，用户无法上网也可访问APP应用中以前下载的数据 性能稳定，可调用手机的硬件设备（语音、摄像头、短信、GPS、重力感应等）和本地资源（通讯录，相册等） 操作速度快，能够实现出色的动效，转场动画 缺点： 开发周期长，开发人员工资起点高。 用户要使用原生APP，必须通过安装到手机里面才行，而且APP软件体积大，占用较多手机内存容量 更新缓慢，根据不同平台，提交–审核–上线流程较复杂。 要获取最新功能，需要升级应用，所以会容易出现有些用户不升级，导致多个不同功能版本出现，维护成本大 跨平台差，每种平台都需要独立的开发语言。Java(安卓),Objective-C(iOS)等等 Web APP
Web APP本质上是为移动浏览器设计的网站，可以在各种智能手机浏览器上运行。
实现技术：
HTML5+Javascript+CSS3 vue组件化+项目打包 .... 优缺点
优点： 一套代码到处运行，可以同时在 PC、Android、iPhone 浏览器上访问 开发者不需要发布到应用市场审核，用户不需要下载、安装和更新 开发周期短，维护成本低 用户不需用户手动更新，可以自动更新，直接使用最新版本 缺点： 转场表现略差，要求联网 用户体验没那么炫。图片和动画支持性不高 没法在App Store中下载、无法通过应用下载获得盈利机会 对手机功能应用缺乏，有限制（摄像头、GPS、蓝牙等） Hybrid APP
Hybrid App就是混合APP，就是Native结合Web的混合开发，就是内部本质是Web网页，使用打包软件给它套一层原生APP的外壳。
实现技术：
React Native phoneGap(cordova+android) APICloud WeX5 appMobi appcan .... 优缺点
优点： 集众家之长，既可以调用丰富的手机设备API，也能拥有Web APP的跨平台能力 可以在应用商店发布，实现收费下载 内部是网页结构，可以自主更新，做到开发一次，所有平台生效 降低开发成本和技术成本，降低维护和开发周期 缺点： 本质上就是一个Web APP使用了原生APP的壳，所以体验比不上原生APP 开发难度比Web APP高，有一定的学习成本，开发周期比Web APP长 APP发布有可能无法通过审核，需要多次调整，才能发布 依赖开发框架本身提供的手机设备API，少部分设备功能还是只能借住原生语言进行调用才可以 对团队技术栈要求相对高，既要懂web开发的，也要懂原生APP开发的 2. 移动端屏幕介绍
3. 移动端自适配方案
目前常用的布局适配方案就3种，分别是vw、像素百分比+flex弹性布局和rem+viewport，后者最流行最容易。
当然，rem+viewport这种方案的实现方式也有很多，其中最著名的就是淘宝的flexible方案。
4.元信息（meta）
html中的meta标签，也叫元信息标签。作用就是用来告诉浏览器，当前网页的附加信息。
meta标签主要有2个属性比较重要。
| 属性名 | 属性值 | 作用描述 |
| :--------- | :-------------------------------------------- | :----------------- |
| http-equiv | content-type , expires , refresh , set-cookie | 设置 HTTP 头部 |
| name | viewport，author , description , keywords | 设置网页附加信息 |
例子：
<head> <meta name="description" content="移动端开发" /> <meta name="keywords" content="移动端,APP,flask" /> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Refresh" content="5;url=http://www.luffycity.com" /> </head> 视口（Viewport）
视口是一个相对比较复杂的概念，所以我们可以简单的理解为，viewport就是用户看手机页面时的可视区域，相当于桌面浏览器的窗口。在桌面浏览器中，viewport 就是浏览器窗口的宽度高度。但在移动端设备上就有点太窄了。
关于视口的详细扩展知识可以参看：https://www.w3cplus.com/css/viewports.html
视口通过meta标签进行设置
<meta name="viewport" content="width=device-width, initial-scala=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" /> 视口参数说明
| 属性名 | 属性值 |
| ------------- | ------------------------ |
| device-width | 设备的宽度 |
| initial-scale | 初始的缩放比例 |
| minimum-scale | 允许用户缩放到的最小比例 |
| maximum-scale | 允许用户缩放到的最大比例 |
| user-scalable | 用户是否可以手动缩放 |
像素（pixel）
在移动端上，所谓的像素分为两种。
CSS像素：CSS像素就是我们在编写CSS代码时的像素。
设备像素：设备屏幕的物理像素，任何设备的物理像素的数量都是固定的。
媒体查询（media query）
媒体查询是css3的一个新增语法属性，它根据页面的视口宽度来定义特殊的 CSS 规则，一般用于进行移动端适配。
@media screen and (min-width:600px) and (max-width:900px){
body {
background-color:#f5f5f5;} } 版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/ydkf/3399.html