大家好，又见面了，我是你们的朋友全栈君。

引言

这一篇文章主要对移动端开发相关的基础知识点，进行总结。从移动端开发的一些概念、专有名词、缩放、viewport移动端事件、适配问题以及一些工作中沟通经常会用到这些方面来说一下移动端

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

几款手机的分辨率

像素相关

物理像素 / 设备像素

• 设备像素 / 物理像素是一个长度单位。 1 物理像素对应显示设备中一个微小的物理部件。
• 设备像素是手机屏幕的一个参数，由手机制造商决定。
  

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

• 设备独立像素，简称 DIP（device-independent pixel）,又称为设备无关像素，是一个长度计量单位。
• 设备独立像素也是手机屏幕的一个参数，由手机制造商决定。
• 1 个设备独立像素可以认为是计算机坐标系统中的一个点，代表可以通过程序控制使用的虚拟像素。
  • 普通屏幕下 1 设备独立像素 等于 1 物理像素
  • 高清屏幕下 1 设备独立像素 等于 N 物理像素

Retina 屏幕

Retina 是苹果公司 2010 年推出的一种显示标准，是把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度。

设备独立像素的出现，使得即使在高分辨率的屏幕下，也可以正常尺寸的显示元素，代码不受到设备的影响。

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

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 端

放大时

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

缩小时

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

移动端

放大时

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

缩小时

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

真机测试流程（重点）

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

• 闭防火墙

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

3-viewport 控制

• viewport 标签是苹果公司在 2007 年引进的，用于移动端布局视口的控制。
• 使用示例

  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scaleable=no,maximum-scale=1.0, minimum-scale=1.0">
  

viewport 相关选项

- width  布局视口宽度
- initial-scale  初始化缩放比例
-  minimum-scale  最小缩放比例
	- 这里通过微信来浏览器演示  苹果内置的和很多安卓的浏览器不可用  itools 实时屏幕
- maximum-scale 最大缩放比例
- user-scalable  设置是否允许用户缩放
	-  苹果内置的浏览器不好使， 但是微信浏览器好使
- viewport-fit   auto/contain/cover

width

width 值可以是数字，也可以是设备宽度表示 device-width，这样可以得到完美视口

initial-scale

• initial-scale 为页面初始化时的显示比例。
• scale = 屏幕宽度独立像素 / 布局视口宽度。
• 注意：
  • chrome 测试该参数会有偏差，真机测试
  • initial-scale = 1.0 也可以得到完美视口
  • initial-scale 会影响布局视口和视觉视口的大小
  • width 与 initial-scale 同时设置时，会选择尺寸较大的那个

minimum-scale

• 设置允许用户最小缩放比例。
• minimum-scale = 屏幕独立像素宽度 / 视觉视口

maximum-scale

• 设置允许用户最大缩放比例，苹果浏览器 safari 不认识该属性
• maximum-scale = 屏幕独立像素宽度 / 视觉视口

user-scalable

是否允许用户通过手指缩放页面。苹果浏览器 safari 不认识该属性。

viewport-fit

设置为 cover 可以解决『刘海屏』的留白问题

4-移动端事件

事件类型

移动端事件列表

• touchstart 元素上触摸开始时触发
• touchmove 元素上触摸移动时触发
• touchend 手指从元素上离开时触发
• touchcancel 触摸被打断时触发

这几个事件最早出现于IOS safari中，为了向开发人员转达一些特殊的信息。

应用场景

• touchstart 事件可用于元素触摸的交互，比如页面跳转，标签页切换
• touchmove 事件可用于页面的滑动特效，网页游戏，画板
• touchend 事件主要跟 touchmove 事件结合使用
• touchcancel 使用率不高
• 注意：
  • touchmove 事件触发后，即使手指离开了元素，touchmove 事件也会持续触发
  • 触发 touchmove 与 touchend 事件，一定要先触发 touchstart
  • 事件的作用在于实现移动端的界面交互

事件绑定

• 方式一

  box.ontouchstart = function(){ 
       
  console.log('touch start')
  }
  

• 方式二

  box.addEventListener('touchstart', function(){ 
       
  console.log('touch start')
  })
  

点击穿透

• touch 事件结束后会默认触发元素的 click 事件，如没有设置完美视口，则事件触发的时间间隔为 350ms 左右，如设置完美视口则时间间隔为 5ms 左右。
• 如果 touch 事件隐藏了元素，则 click 动作将作用到新的元素上，触发新元素的 click 事件或页面跳转，此现象称为点击穿透

解决方法

• 阻止当前元素事件的默认行为。

  cls.addEventListener('touchstart', function(e){ 
       
  e.preventDefault();
  })
  

• 阻止顶级元素事件的默认行为，可以增加一个包裹元素绑定，也可以给 document 和 window 绑定，不过需要关闭被动模式

  document.addEventListener('touchstart', function(e){ 
       
  	e.preventDefault();
  }, { 
       
  	passive: false
  });
  

• 使用非链接的元素代替 a 标签，并绑定 touchstart 事件

  <div class="item">
  <div data-href="http://m.atguigu.com"><img src="holder.js/60x60?bg=#a76"></div>
  </div>
  

• 延时隐藏遮盖元素

  setTimeout(function(){ 
       
  	el.style.display = 'none';
  }, 400)
  

页面跳转的选择

移动端页面跳转可以使用 a 链接，也可以使用 touchstart 事件来触发 JS 代码完成跳转

• 效率上，touchstart 速度更快
• SEO 优化上， a 链接效果更好

浏览器默认行为

这里指的浏览器默认行为主要有两个

• 滑动露白
• 页面缩放

为什么要阻止这些默认行为

这样可以让网页在不同的浏览器都有一样的表现。

如何阻止默认行为

可以给 document 绑定 touchstart 事件，并阻止默认行为，不过需要关闭被动模式。这里推荐创建一个包裹元素，绑定 touchstart 事件并阻止默认行为。

• CSS 代码

  html, body, #app { 
       
  width: 100%;
  height:100%;
  overflow: hidden;
  }
  

• HTML 代码

  <body>
  <div id="app">
  .
  .
  .
  </div>
  </body>
  

• JS 代码

  app.addEventListener('touchstart', function(e){ 
       
  e.preventDefault();
  })
  

后遗症

最外层元素阻止了 touchstart 默认行为之后，会产生一些意外现象?

• 链接失效
• 内容无法选择
• form 元素无法获得焦点

灵丹妙药

产生『后遗症』的原因在于 touchstart 阻止了默认行为，后续所有的操作都已经失效。解决问题只需要给目标元素绑定 touchstart 事件并阻止事件冒泡，这样当前操作的默认行为仍然可用。?

var link = document.getElementsByTagName('a')[0];
link.addEventListener('touchstart', function(e){ 
   
	e.stopPropagation();
})

注: 不是非要阻止浏览器的默认行为，这是一种极端要求的应对方法，正常只需要设置完美视口即可。

事件对象属性

touch 事件对象中有 3 个非常重要的属性

• changedTouches
• targetTouches
• touches

touchstart 事件

在 touchstart 事件中

• changedTouches 为当前在元素上同时滑动的触点对象数组。
• targetTouches 为滑动时，当前元素上的触点对象数组
• touches 为滑动时，当前屏幕上所有的触点对象数组

touchmove 事件

在 touchend 事件中

• changedTouches 为当前在元素上同时抬起的触点对象数组。
• targetTouches 为结束时时，当前元素上的触点对象数组
• touches 为结束时时，当前屏幕上所有的触点对象数组
  触摸结束的位置，必须要使用 touchend 事件中的 changedTouches 来获取

触点对象

每一个触点对象都包含一些位置信息，其中包括

• clientX 相对可视区域左侧的偏移
• clientY 相对可视区域顶侧的偏移
• pageX 相对文档左侧的偏移
• pageY 相对文档顶部的偏移

5-小案例（未完待续—后续补上）

• 触摸拖拽
• 竖向滑屏
• 画板

6-适配

移动端设备的屏幕尺寸繁多，要想让页面的呈现统一，需要对不同尺寸的设备进行适配。适配的方式主要有两种

• viewport 适配
• rem 适配

viewport 适配

拿到设计稿之后，设置布局视口宽度为设计稿宽度，然后量尺寸进行布局即可。

<meta name="viewport" content="width=375, user-scalable=no">

操作步骤:

1. 上传 PSD 到蓝湖
2. 设置 viewport 标签 width=375 (以设计稿为准)
3. 根据设计稿测量尺寸,编写 CSS

rem适配

em 和 rem

em 和 rem 都是 CSS 中的长度单位。而且两个都是相对长度单位，不过两个有点区别

• em 相对的是父级元素的字体大小
• rem 相对的是根元素的字体大小

核心是等比缩放

rem 适配的策略有以下几种

• 方法一
  先按照 IPhone 6 进行页面布局，再进行适配
  1. 完美视口设置
  2. 设计稿总宽 375 布局
  3. 设置 font-size 100px 尺寸转为 rem
  4. 增加 JS 代码进行页面适配

document.documentElement.style.fontSize = document.documentElement.clientWidth*100/375+'px';

• 方法二
  编写时按照 IPhone 6 直接使用 rem 单位进行布局
  1. 完美视口设置
  2. 设计稿总宽 375 布局
  3. 以 font-size 100px 进行尺寸换算，设置 rem
  4. 增加 JS 代码进行页面适配

document.documentElement.style.fontSize = document.documentElement.clientWidth*100/375+'px';

• 方法三
  选择一个设计稿宽度的比例尺寸作为根元素的字体大小
  1. 完美视口设置
  2. 通过 JS 设置页面的根元素字体大小。可以除以 10 也可以除以其他的数字

document.documentElement.style.fontSize = document.documentElement.clientWidth/10+'px';

• 3. 根据设计稿使用 rem 设置元素大小

  @rem: 375/10rem;
  #banner { 
       
  width: 335/@rem;
  height: 144/@rem;
  background: #225094;
  margin: 97/@rem auto 0px;
  }
  

1px 边框问题

高清屏幕下 1px 对应更多的物理像素，所以 1 像素边框看起来比较粗，解决方法如下

方法一

1. 边框使用伪类选择器，或者单独的元素实现。例如底部边框

   .box2::after{ 
        
   content:'';
   height:1px;
   width:100%;
   position:absolute;
   left:0;
   bottom:0;
   background:#000;
   }
   

2. 在高清屏幕下设置

   @media screen and (-webkit-min-device-pixel-ratio: 2){ 
        
   .box2{ 
        
       transform:scaleY(0.5);
   	}
   }
   
   @media screen and (-webkit-min-device-pixel-ratio: 3){ 
        
   .box2{ 
        
       transform:scaleY(0.33333);
   	}
   }
   

方法二

1. rem 页面布局

   var fontSize = 50;
   document.documentElement.style.fontSize = '50'+px;
   

2. 元素的边框设置为 1px
3. 通过 viewport 中的 initial-scale 将页面整体缩小

   var dpr = window.devicePixelRatio;
   viewport.setAttribute('content', 
                     'user-scalable=no, initial-scale='+1/dpr + ',user-scalable=no');
   

4. 重新设置根元素字体

   document.documentElement.style.fontSize = fontSize * dpr + 'px';
   

7-附录

chrome 插件安装

1. 下载 crx 插件文件，如 caoliao.crx
2. 更名为 .rar 后缀， 例 caoliao.rar
3. 解压文件，得到 caoliao 文件夹
4. chrome 浏览器 -> 右上角 ┆ -> 更多工具 -> 扩展程序 -> 右上角开启开发者模式 -> 左侧已解压的扩展程序 -> 选择 caoliao 文件夹 ?

webstorm 配置 less 解析

1. 下载安装 nodejs 。下载地址 http://nodejs.cn/download/
2. 命令行下安装 lessc

npm install less -g

3. webstorm 配置文件监控

ctrl + alt + s 打开设置  ->  搜索 watcher -> 点击右上角 + 号 -> 选择 less -> 确定?

4. 创建 less 文件，就会自动生成 css 文件

8-总结

• 相信不用多说了，一万多字的详解移动端开发，希望每一个知识点可以帮助到你
• 愿你在这个代码繁杂、头发渐秃的编码世界里，可以温暖疲倦的自己，坚持学习

有时候你不努力一下，就不知道什么叫绝望。

『传送门』☛ 什么是混合移动App开发【重点学习系列—干货十足–一文详解】

『传送门』☛ 什么是微信小程序【重点学习系列—干货十足–一文详解】