移动开发的现状
- 移动端屏幕尺寸更小
- 移动端和pc端开发本质上一样的，都是用HTML/CSS/JavaScript的技术。
问题： 移动端开发与传统的pc端开发有什么区别？
-
浏览器不同（兼容性区别）
-
pc端：浏览器种类很多，需要添加不同的私有前缀
谷歌浏览器 苹果浏览器、 UC浏览器、QQ浏览器、欧朋浏览器、百度手机浏览器、360安全浏览器、搜狗浏览器、猎豹浏览器…
-
移动端：浏览器只需要兼容webkit内核即可，前缀只需要添加
-webkit-即可并且手机更新换代很快，所以浏览器版本都比较新，对于css3新属性的支持会更好
-
-
屏幕尺寸不同（适配区别）
-
pc端：屏幕较大，通过版心适配即可
-
移动端：屏幕很小，宽度一般占满一行，需要自适应（流式布局：百分比布局）
并且移动端屏幕尺寸很多：
Android：
320*480480*800540*960720*12801080*19202k屏 4k屏
iphpne：640*960640*1136750*13341242*2208
-
-----------------
移动端调试问题
- 真机调试：使用真的手机进行访问。
- 模拟器调试：开发代码阶段使用的。
手机设备五花八门，屏幕尺寸都大不一样，尤其是安卓端，给我们的页面预览带来了一些麻烦。在实际工作中，作为开发者不可能有足够的设备让我们去测试（除了测试部门 ），即便有，效率也特别的低，因此开发者一般都是通过浏览器的手机模拟器来模拟不同的设备。
视口viewport
先把vscode默认设置的视口参数去掉。
问题： 写一个div宽度为320px，使用手机端比如iPhone5打开，应该是占满的，但是看效果？
并没有占满一行，此时html标签的宽高是980px。
原因是因为手机端的页面打开的时候会在视口中打开。
原因： 历史原因：乔布斯发明了视口
- 早期，只有pc端网页，早期网页的版心为980px，手机端如果直接查看980px宽度的网页，只能看到一部分，用户体验极差！！
- 后来乔布斯为了让移动端可以看到完整的网页，发明了视口这个概念！专门解决移动端查看pc端网页的问题
视口：就是用于盛放网页的容器
- 可以缩放
- 宽度默认是980px
视口作用的过程：
移动端打开网页——》先把网页在980px的视口中打开（完美展示）——》再把视口缩放和移动端一样大，显示在移动端中（让用户可以在屏幕中看到全部的网页）
随着技术发展，现在已经有针对于移动端的网页了，此时我们可以设置视口的参数，完成效果。
- 视口的宽度是可以设置的
视口参数设置：
//width 设置视口的宽度
width=device-width //设置视口宽度为设备的宽度（常用）。
//initial-scale 设置初始缩放比例
initial-scale=1.0 //表示不缩放
//user-scalable 设置是否允许用户缩放
user-scalable=no //不允许用户缩放
//maximum-scale //设置允许的最大缩放比例
maximum-scale=1.0 //可以不设置，因为都禁止用户缩放了。
//minimum-scale 设置允许最小缩放比
minimum-scale=1.0 //可以不设置，因为都禁用用户缩放了。
//标准写法：
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">