该系列一共有 5 篇，包括《认识前端最佳实践》、《HTML 最佳实践》、《CSS 最佳实践》、《JavaScript 最佳实践》、《移动 Web 前端开发最佳实践》，是 《Web 前端开发最佳实践》（党建 著）的学习笔记，该书有些知识已经过时了或者用得非常少了，这些文章中将不会提及，比如 JQuery、兼容 IE 浏览器知识等。本篇是该系列第五篇 《移动 Web 前端开发最佳实践》，前一篇《JavaScript 最佳实践》，帮助自己日后温故知新，也希望对其他人有帮助。
1. 概述
移动端的便捷性是桌面端无法比拟的。和桌面端浏览器相比，主流移动端浏览器对 HTML5 新标准的支持更好，基本都是以 WebKit 微内核的浏览器，浏览器兼容不再是一个突出的问题。
1.1. 移动端和桌面端 Web 前端开发的差异
-
显示差异
移动设备具有屏幕小、设备之间屏幕大小和分辨率差异大、性能低等特点。移动端和 PC 端之间的页面显示差异，可以自定义页面的 viewport 的宽度、高度、初始缩放，以及最大最小缩放等属性，以适应设计的要求。
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalabel=no" />
上面代码表示页面的宽度为设备宽度、初始缩放比例为 1，并且禁止用户缩放网页。
-
事件绑定的差异
TouchEvent 是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件。
触摸事件分为 4 类：touchstart、touchmove、touchend 和 touchcancel 事件。touchstart、touchmove 和 touchend 对应着桌面端浏览器中的 mousedown、mousemove 和 mouseup。touchcancel 比较独特，在某些情况下触发事件可能被打断，比如用户按下了 home 键，或者浏览器底部工具条上的按键等，这时候 touchend 不会触发，会触发 touchcancel 事件。
-
页面控件设计上存在差异
移动设备中不会触发 CSS 样式中的 hover 伪类，此样式在触摸设备中不会起作用，可以考虑使用 CSS 中的 active 伪类替代。
1.2. Web 页面兼容移动设备
尽管专门为移动设备开发一套网站是一个最优选择，但是往往需要很大的成本。
-
使用流式布局
为了确保页面兼容各种尺寸设备，页面中各模块宽度、内外边距以及边框的宽度设置必须是相对值，推荐使用百分比设置。
-
媒体查询
<!-- link 元素中的 CSS 媒体查询 --><link rel="stylesheet" media="(max-width: 800px)" href="example.css">
<!-- 样式表中媒体查询 --><style>
@media(max-width: 600px) {
/*...*/
}</style>
-
使用适合的图片显示兼容方案
img 标签 srcset 属性的值是一个字符串，用来定义一个或多个图像候选地址，以 ,分割，每个候选地址将在特定条件下得以使用。候选地址包含图片 URL 和一个可选的宽度描述符和像素密度描述符，该候选地址用来在特定条件下替代原始地址成为 src (en-US) 的属性。
<div class="box"> <img src="https://yari-demos.prod.mdn.mozit.cloud/en-US/docs/web/html/element/img/clock-demo-200px.png" alt="Clock" srcset="https://yari-demos.prod.mdn.mozit.cloud/en-US/docs/web/html/element/img/clock-demo-200px.png 1x, https://yari-demos.prod.mdn.mozit.cloud/en-US/docs/web/html/element/img/clock-demo-400px.png 2x"></div>
图像的默认宽度是 200 像素。 srcset 属性还指定了 200 像素版本应用于 1x 显示器，而 400 像素版本应用于 2x 显示器。
<picture> 元素通过包含零或多个 <source> 元素和一个 <img> 元素来为不同的显示/设备场景提供图像版本。浏览器会选择最匹配的子 <source> 元素，如果没有匹配的，就选择 <img> 元素的 src 属性中的 URL。然后，所选图像呈现在 <img> 元素占据的空间中。
-
增加链接和按钮的可操作区域
移动设备使用手指触摸，不如鼠标，精度不够，所以添加可操作区域能很好地响应触发事件。
-
使用响应式设计框架
比如 bootstrap 框架来开发响应式页面。
1.3. 开发移动 Web 站点准备工作
-
确定支持的移动设备
考察指标包括：屏幕显示尺寸、DPI、内存和 CPU 性能、浏览器版本。
-
处理桌面端和移动端的交互
移动端网站的域名一般选取桌面端网站域名的二级域名，二级域名的名称选取 mobile 或 m。
-
设计移动端站点为单页模式，避免页面跳转
PC 端浏览器为了同时浏览多个网页，是以多个 tab 的方式展现，用户可以切换不同的 tab 来浏览多个页面。但是移动设备中，受限于浏览器窗口的大小，在一个设备中打开多个网页，则并不容易回到之前的网页中。
推荐框架：Ionic, React Navite 等移动端组件库
2. 相关技术最佳实践
2.1. HTML 相关最佳实践
-
在页面中添加必要的 meta 和 link
比如希望浏览器自动识别电话号码：
<meta name="format-detection" content="telephone=yes" />
-
利用移动端的便利性
让用户快速的打电话或发邮件
<a href="mailto:xxx@qq.com">Email</a><a href="tel:+123456789">Phone</a>
-
谨慎使用 iframe 和 table
移动设备很难适配 table 和 iframe 的显示，其屏幕宽度不够，内容被遮盖或布局变乱。
2.2. CSS 相关最佳实践
-
尽量少用图标使用字体图标替代
比如 iconfont Font Awesome 等。
-
不使用 hover 悬停效果
如果为了体现当前元素处于激活状态，可以使用 :active 伪类来进行相应设置。
-
合理使用行高
为了获得更好的阅读体验，将字体调大些、行高调大些。
-
在不需要选中文字的区域禁用文字选择功能
user-select 控制用户能否选中文本。除了文本框内，它对被载入为 chrome 的内容没有影响
user-select: none
2.3. JavaScript 相关最佳实践
触发鼠标 click 事件会滞后 300ms，这样设计的原因是浏览器需要时间来判断用户是否通过手势操作来缩放页面。大部分移动端框架使用 tap 事件来规避这个问题。
-
屏幕横竖屏切换事件
orientationchange 事件在设备的纵横方向改变时触发。
// 在addEventListener 方法中使用 orientationchange 事件：window.addEventListener("orientationchange", function() { console.log("the orientation of the device is now " + screen.orientation.angle);
});// 或者使用 onorientationchange 事件处理程序属性：window.onorientationchange = function() { console.log("the orientation of the device is now " + screen.orientation.angle);
};
-
谨慎使用标准对话框避免弹出窗口
这些标准对话框包括 alert、confirm、prompt、print 等。在移动端不同平台不同浏览器中外观不一样，建议使用模拟的对话框来替代标准对话框。
移动端开发中，尽量少使用 window.open 来打开新的窗口。
-
谨慎使用 timer
例如，使用 setInterval() 间隔发送一些固定消息，如果切换当前页面为不可见时（按 home 键，打开新的 tab），页面会停止发送这些消息。
