大家好，又见面了，我是你们的朋友全栈君。
引言
这一篇文章主要对移动端开发相关的基础知识点，进行总结。从移动端开发的一些概念、专有名词、缩放、viewport移动端事件、适配问题以及一些工作中沟通经常会用到这些方面来说一下移动端
文章目录
- 引言
- 1-移动端开发相关概念
- 移动端特点
- 屏幕大小
- 注意：
- 屏幕分辨率
- 注意
- 几款手机的分辨率
- 像素相关
- 物理像素 / 设备像素
- 设备独立像素 / 设备无关像素
- Retina 屏幕
- 几款手机的屏幕像素参数,[点击这里查看更多](https://uiiiuiii.com/screen/)
- CSS 像素 / 逻辑像素
- 位图像素
- 位图和矢量图
- 像素之间的关系
- 像素密度
- 像素比 / N倍屏
- 视口
- PC 端
- 移动端
- 布局视口
- 视觉视口
- 理想视口
- 2-缩放
- PC 端
- 移动端
- 真机测试流程（重点）
- 3-viewport 控制
- viewport 相关选项
- width
- initial-scale
- minimum-scale
- maximum-scale
- user-scalable
- viewport-fit
- 4-移动端事件
- 事件类型
- 应用场景
- 事件绑定
- 点击穿透
- 解决方法
- 页面跳转的选择
- 浏览器默认行为
- 为什么要阻止这些默认行为
- 如何阻止默认行为
- 后遗症
- 灵丹妙药
- 事件对象属性
- touchstart 事件
- touchmove 事件
- 触点对象
- 5-小案例（未完待续—后续补上）
- 6-适配
- viewport 适配
- rem适配
- em 和 rem
- 核心是等比缩放
- 1px 边框问题
- 方法一
- 方法二
- 7-附录
- chrome 插件安装
- webstorm 配置 less 解析
- 8-总结
- 『传送门』☛ [什么是混合移动App开发【重点学习系列—干货十足–一文详解】](https://blog.csdn.net/q761830908/article/details/103303307)
- 『传送门』☛ [什么是微信小程序【重点学习系列—干货十足–一文详解】](https://blog.csdn.net/q761830908/article/details/103375166)
1-移动端开发相关概念
移动端特点
移动端与 PC 端网页有所不同，有以下几个特点
- 小屏幕
- 触摸交互
- 屏幕尺寸繁多
屏幕大小
屏幕大小指屏幕的对角线的长度，单位一般是英寸。常见的手机屏幕大小 3.5、4、4.7、5.0、5.5、6.0等。常见手机屏幕查看网址 http://screensiz.es/
注意：
- 英寸的英文为 inch , 英尺的英文是 foot
- 1foot = 12inch 1inch=2.54cm
屏幕分辨率
屏幕分辨率是指屏幕横纵向上的像素点数。一般表示形式 x * y 或者 y * x 表示。例如 IPhone 6 的屏幕分辨率为 750 * 1334，华为 P30 的分辨率为 2340 * 1080。
注意
- 屏幕分辨率是一个固定值，生产出来就固定了，无论手机屏幕还是电脑屏幕。
- 屏幕分辨率与显示分辨率不同。计算机可以修改显示分辨率，信号传递给屏幕，屏幕会进行计算，在屏幕上显示。
- 1080P 的分辨率是1920×1080
- 2K 屏幕是单一方向分辨率具有约 2000 像素的显示设备。最标准的 2K 分辨率为 2048×1024
几款手机的分辨率
型号 | 分辨率 |
|---|---|
IPhone 3GS | 320 * 480 |
IPhone 4 / 4s | 640 * 960 |
IPhone 5 / 5s | 640 * 1136 |
IPhone 6 / 7 / 8 | 750 * 1334 |
华为 P30 | 1080 * 2340 |
IPhone X | 1125 * 2436 |
像素相关
物理像素 / 设备像素
- 设备像素 / 物理像素是一个长度单位。 1 物理像素对应显示设备中一个微小的物理部件。
- 设备像素是手机屏幕的一个参数，由手机制造商决定。
设备独立像素 / 设备无关像素
- 设备独立像素，简称 DIP（device-independent pixel）,又称为设备无关像素，是一个长度计量单位。
- 设备独立像素也是手机屏幕的一个参数，由手机制造商决定。
- 1 个设备独立像素可以认为是计算机坐标系统中的一个点，代表可以通过程序控制使用的虚拟像素。
- 普通屏幕下 1 设备独立像素 等于 1 物理像素
- 高清屏幕下 1 设备独立像素 等于 N 物理像素
Retina 屏幕
Retina 是苹果公司 2010 年推出的一种显示标准，是把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度。
设备独立像素的出现，使得即使在高分辨率的屏幕下，也可以正常尺寸的显示元素，代码不受到设备的影响。
几款手机的屏幕像素参数,点击这里查看更多
型号 | 设备像素总和 | 设备独立像素总和 |
|---|---|---|
IPhone 3GS | 320 * 480 | 320 * 480 |
IPhone 4 / 4s | 640 * 960 | 320 * 480 |
IPhone 5 / 5s | 640 * 1136 | 320 * 568 |
IPhone 6 / 7 / 8 | 750 * 1334 | 375 * 667 |
HUAWEI P10 | 1080 x 1920 | 360 x 640 |
IPhone X | 1125 * 2436 | 375 * 812 |
CSS 像素 / 逻辑像素
CSS 像素是一个抽象的长度单位，单位 px，主要用来精确度量和控制 WEB 网页上的内容。
- CSS 像素不能直接跟现实中的长度单位换算
- CSS 像素主要用在 CSS 与 JS 中控制元素的大小
位图像素
位图像素也是一个长度单位。位图像素是栅格图像（如：png，jpg，gif等）最小的数据单元。
位图和矢量图
- 位图图像是由称作像素（图片元素）的单个点组成的。放大后会失真。
- 矢量图，也称为面向对象的图像或绘图图像，在数学上定义为一系列由线连接的点。放大后不会失真。软件有Adobe Illustrator，Sketch
1个位图像素对应于1个物理像素，图片才能得到完美清晰的展示
像素之间的关系
- CSS 像素 == 独立设备像素 == 逻辑像素 == DIP == 位图像素
- 在一个标准的显示密度下(普通屏)，一个 CSS 像素对应着一个设备像素，高清屏幕下一个 CSS 像素 等于 N 个物理像素
像素密度
屏幕上每英寸可以显示的像素点的数量，单位是 ppi （pixels per inch ），这里还有另一个单位 dpi（dots per inch），两个值的计算方式都一样，只是使用的场景不同。 描述屏幕属性时使用 ppi，开发过程中描述屏幕设备使用 dpi。
苹果曾经给出个一个标准：手机屏幕达到 300PPI、平板屏幕达到 220PPI、笔记本电脑屏幕达到 200PPI 即可认为是 Retina 屏幕。
像素比 / N倍屏
像素比（DPR dpr）： 单一方向上设备物理像素和设备独立像素的比例。
像素比的作用 程序可以根据像素比来显示不同的图片，达到清晰显示网页的效果。
注意: 并不是所有的图片都这样处理，只需要处理那些页面布局需要的图片和图标即可
视口
PC 端
在 PC 端，视口指的是浏览器的可视区域。其宽度和浏览器窗口的宽度保持一致。在 CSS 标准文档中，视口也被称为初始包含块，它是所有 CSS 百分比宽度推算的根源。
移动端
移动端的视口与 PC 端不同，有三个视口
- 布局视口
- 视觉视口
- 理想视口
布局视口
布局视口是用来放置网页内容的区域。
一般移动设备的浏览器都默认定义一个虚拟的布局视口（layout viewport），用于解决早期的页面在手机上显示的问题。 视口大小由浏览器厂商决定，大多数设备的布局视口大小为 980px。
视觉视口
视觉视口就是用户可见的区域。
获取方式
注：不缩放的情况下，视觉视口宽度 == 布局视口宽度。
理想视口
宽度与屏幕同宽的布局视口称为理想视口。 理想视口的好处
注意：理想视口不是真实存在的视口
设置理想视口的方法
2-缩放
PC 端
放大时
- 布局视口变小
- 视觉视口变小
- 元素的像素大小不变
缩小时
- 布局视口变大
- 视觉视口变大
- 元素的像素大小不变
移动端
放大时
- 布局视口不变
- 视觉视口变小
缩小时
- 布局视口不变
- 视觉视口变大 注意：移动端缩放不会影响页面布局
真机测试流程（重点）
真机测试是项目测试必要的一个流程，一定要掌握！！！
- 闭防火墙
- webstorm -> ctrl alt s -> 搜索 debugger -> 修改端口并勾选两个多选框
- 使 PC 与手机处于同一个网络。手机连接电脑 wifi，或者电脑连接手机热点，两者在同一个 wifi 下最方便。
- cmd 查看电脑无线网卡的 IP（ipconfig）
- webstorm 在浏览器中预览文件，将 localhost 更改为 IP
- 打开草料网址 https://cli.im/ 将 URL 转化为二维码，手机扫描即可
