引言

这一篇文章主要对移动端开发相关的基础知识点，进行总结。从移动端开发的一些概念、专有名词、缩放、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 的分辨率是1920x1080
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）：单一方向上设备物理像素和设备独立像素的比例。
window.devicePixelRatio

像素比的作用
程序可以根据像素比来显示不同的图片，达到清晰显示网页的效果。

@media screen and (-webkit-min-device-pixel-ratio: 2) {.logo {background-image: url('./image/logo@2x.png');
}
}

注意:
并不是所有的图片都这样处理，只需要处理那些页面布局需要的图片和图标即可

视口

PC 端

在 PC 端，视口指的是浏览器的可视区域。其宽度和浏览器窗口的宽度保持一致。在 CSS 标准文档中，视口也被称为初始包含块，它是所有 CSS 百分比宽度推算的根源。

移动端

移动端的视口与 PC 端不同，有三个视口

布局视口
视觉视口
理想视口

布局视口

布局视口是用来放置网页内容的区域。
一般移动设备的浏览器都默认定义一个虚拟的布局视口（layout viewport），用于解决早期的页面在手机上显示的问题。视口大小由浏览器厂商决定，大多数设备的布局视口大小为 980px。
```
document.documentElement.clientWidth
document.documentElement.clientHeight
```

视觉视口

视觉视口就是用户可见的区域。
获取方式
```
window.innerWidth
window.innerHeight
```
注：不缩放的情况下，视觉视口宽度 == 布局视口宽度。

理想视口

宽度与屏幕同宽的布局视口称为理想视口。理想视口的好处
- 用户不需要缩放和滚动条就能看到网站的全部内容。
- 针对移动端的设计稿更容易开发。
注意：理想视口不是真实存在的视口

设置理想视口的方法

<meta name="viewport" content="width=device-width" />
// 或者
<meta name="viewport" content="initial-scale=1.0" />
// 合体
<meta name="viewport" content="width=device-width,initial-scale=1.0" />

2-缩放

PC 端

放大时

布局视口变小
视觉视口变小
元素的像素大小不变

缩小时

布局视口变大
视觉视口变大
元素的像素大小不变

移动端

放大时

布局视口不变
视觉视口变小

缩小时

布局视口不变
视觉视口变大
注意：移动端缩放不会影响页面布局

真机测试流程（重点）

真机测试是项目测试必要的一个流程，一定要掌握！！！

闭防火墙

webstorm -> ctrl + alt + s -> 搜索 debugger -> 修改端口并勾选两个多选框
使 PC 与手机处于同一个网络。手机连接电脑 wifi，或者电脑连接手机热点，两者在同一个 wifi 下最方便。
cmd 查看电脑无线网卡的 IP（ipconfig）
webstorm 在浏览器中预览文件，将 localhost 更改为 IP
打开草料网址 https://cli.im/ 将 URL 转化为二维码，手机扫描即可

什么是移动端开发【重点学习系列---干货十足--一万字详解】相关推荐
1. 什么是TCP三次握手和四次挥手【重点学习系列---干货十足--一文详解】
  引言本文将会从一个爱情的故事开始,着力从什么是三次握手.为什么是三次而不是俩次或者四次.TCP关闭的过程.为什么要四次挥手.而不是三次.为什么最后是2MSL.什么是2MSL这些问题展开分析,详解,让 ...
2. 什么是微信小程序【重点学习系列---干货十足--一文详解】
  引言本文主要从什么是微信小程序.微信小程序的介绍.小程序开发流程.小程序代码构成.小程序安装使用.配置分析.开发特点.实战项目等多角度手把手带你详解微信小程序. 文章目录引言第一章-什么是微信小 ...
3. 移动端 c++ 开发_这 10 点值得移动端开发重点学习
  大家好,我是拭心,最近有朋友问我:"安卓开发是不是没人要了,除了画 UI 别的都不会怎么办?" 考虑到这可能是很多人共同的疑问,决定简单写一下. 不是安卓开发没人要了,是初级安卓没 ...
4. Android开发重点难点1：RelativeLayout(相对布局)详解
  前言啦啦啦~博主又推出了一个新的系列啦~ 之前的Android开发系列主要以完成实验的过程为主,经常会综合许多知识来写,所以难免会有知识点的交杂,给人一种混乱的感觉. 所以博主推出"重点难 ...
5. 日志库EasyLogging++学习系列（7）—— 记录方式详解
  在前面所列文章的演示代码中,其实已经展示了一部分记录日志的方式.为了使用方便,在 Easylogging++ 中,通过使用宏的集合来完成日志记录. 普通日志记录对于普通的日志记录,我们可以选择以下两 ...
6. Java | 学习系列 Java1.8 新特性详解( 包含学习代码 )
  前言: Java 8 已经发布很久了,很多报道表明Java 8 是一次重大的版本升级.在Java Code Geeks上已经有很多介绍Java 8新特性的文章,例如Playing with Java ...
7. [系统安全] 四十四.APT系列(9)Metasploit技术之基础用法万字详解及防御机理
  您可能之前看到过我写的类似文章,为什么还要重复撰写呢?只是想更好地帮助初学者了解病毒逆向分析和系统安全,更加成体系且不破坏之前的系列.因此,我重新开设了这个专栏,准备系统整理和深入学习系统安全.逆向分 ...
8. flutter图片点击跳转_Flutter系列之Platform Channel使用详解
  PS:逐渐体会到关键少数原则的重要性,接下来就是付诸实践了,另外科创50ETF明天开始限额销售,可以适当关注或入手一点. 前面几篇文章介绍了 Navigator 组件.Flex 布局.图片加载.Wid ...
9. kubernetes系列11—PV和PVC详解
  kubernetes系列11-PV和PVC详解原文:kubernetes系列11-PV和PVC详解本文收录在容器技术学习系列文章总目录 1.认识PV/PVC/StorageClass 1.1 介绍 ...
最新文章
热门文章

什么是移动端开发【重点学习系列---干货十足--一万字详解】

引言

文章目录

1-移动端开发相关概念

移动端特点

屏幕大小

注意：

屏幕分辨率

注意

几款手机的分辨率

像素相关

物理像素 / 设备像素

设备独立像素 / 设备无关像素

Retina 屏幕

几款手机的屏幕像素参数,点击这里查看更多

CSS 像素 / 逻辑像素

位图像素

位图和矢量图

像素之间的关系

像素密度

像素比 / N倍屏

视口

PC 端

移动端

布局视口

视觉视口

理想视口

2-缩放

PC 端

移动端

真机测试流程（重点）

什么是移动端开发【重点学习系列---干货十足--一万字详解】相关推荐

最新文章

热门文章