b/s架构：
b:browser 浏览器 s:server 服务器
PC端的网站：前台、后台管理系统
手机端的网站：webapp
本质也是一个网站，这个网站运行在手机的浏览器上
c/s架构：
c:client 客户端、 s:server 服务器
一些软件：
PC端的软件、手机端软件： app application
android手机上的软件
ios手机上的软件
app的分类：
webapp: 就是运行在手机端的网站 是基于BS架构
使用html+css+js就可以开发webapp
优点：
开发成本低，不需要安装，升级也比较方便，在andorid和ios上都可以运行。
缺点：体验不给力，不能调用原生接口。
nativeapp: 原生app，说白了，就是andorid和ios。
原生app，直接运行在操作系统（android或ios）上面，可以调用原生接口，体验也非常好。
优点：体验非常好，速度也非常快，访问本地资源，动画效果也比较好。
缺点：开发成本高一点，更新缓慢，上线不方便，用户还需要下载安装。
hybridapp: 混合app，原生app中嵌套h5页面
就是结合webapp和nativeapp的优缺点，来做hybrdapp。RN。
视口：
<meta name="viewport"
content="width=device-width, initial-scale=1.0,minimum-scale=1,maximum-scale=1">
如果把一个PC端网站放到的移动端，整体会被缩小。分析原因：
把PC端的网站放到移动端，分两步：
1）把PC端的网站放到一个虚拟容器中，这个虚拟容器，它的宽度是980。这个980是人为规定的，手机出厂就设置好了。
如果说网页的整体宽度是980px，那么就意味着， 这个网页正好放到这个虚拟容器中。
如果说网页的整体宽度小于980px，这个虚拟容器也可以放下。
如果说网页的整体宽度大于980px，那么就会产生水平滚动条。
2）它会把虚拟容器塞到手机中。
如果说手机的宽度也是980，正好把这个虚拟容器塞进去。
不幸的是，手机的宽度在出厂时，它就固定死了。如：iphone6/7/8宽度是375。iphone5的宽度是320。iphone6/7/8plus宽度是414
也就是说，把一个980的虚拟容器，我要放到一个375或320或414的手机中，此时这个虚拟容器就会压缩后，放到手机中
你压缩了，页面上的盒子就变小了。
这个虚拟容器就叫视口。
同一个盒子，在不同的手机上，显示的大小，是取决于分辨率吗？
答：不是 取决于另外一个像素，叫设备独立像素。
iphone6/7/8 设备独立像素是375，通常我们就直接说，iphone6/7/8它的宽度是375.
人为地设置虚拟容器（视口）的宽度：
为什么要人为设置？答：为了不让盒子压缩。
以iphone6为例，如果说把视口也设置成375，盒子就不压缩了。
<meta name="viewport" content="width=device-width">
结论：只要我们去写webapp，必须要重新设置视口。
视口的属性：
width 设置视口的宽度 通常它的值就是device-width
initial-scale 设置页面的初始缩放值
minimum-scale minimum是最小值的意思 允许用户最小的缩放值 是一个数字，可以是小数 通常情况下是1
maximum-scale maximum是最大值的意思 允许用户最大的缩放值 是一个数字，可以是小数 通常情况下是1
user-scalable 是否允许用户两个手指去缩放 no 0 表示不允许 yes表示允许
height 设置视口的高度 没什么卵用
可以只设置initial-scale， width=device-width 等价于 initial-scale=1.0。
答:视口 = 设置独立像素（375） / initial-scal
设置视口有两种方式：
width
initial-scale
如果这两种方式都设置了，最终以视口大的为主。
不允许用户缩放，也有两种方式：
1）user-scalable=no
2）minimum-scale=1,maximum-scale=1