从pc前端开发迁移到mobile
这篇文章特别适用于有一定pc前端开发经验，想要学习或了解移动端（mobile）的前端开发的同学来阅读。全文将分门别类来讲述移动端前端开发与pc端的不同之处。
mobile前端开发主要特点
OPOA
mobile端OPOA（单页应用，有时也称SPA）的比例比PC端要大，主要有这样一些原因：
在生产环境，浏览器对高级API、html5、es5支持较好
OPOA通常与SEO是一对天敌，而移动端搜索引擎的地位较弱，SEO没有那么重要
这些网页有时需要内嵌到app中，app中做页面跳转比较复杂和耗能、耗时间，不如所有功能在一个页面内完成
另外，mobile端优化到一定程度还关注模板在服务器端渲染还是在客户端端渲染。
性能弱
移动设备相对pc，计算能力、内存都比较弱。应该避免复杂的组件和大量的DOM写入操作；对于大量的数据计算操作，应该在服务器端完成或交给异步的Worker接口计算。
流量敏感、高延迟
在移动端每个文件、请求的大小都需要考虑，因为很多用户需要为每一kb的流量付费，并且为此付出等待加载的时间。
在每个请求里，不同的网络环境下有着不同的网络延迟，4G网络的延迟大概是20ms，3G网络的延迟大概是100ms，所以减少请求数的优化，比在PC上收益更大。
但也不要极端地追求减少连接数，合理的并行下载、多域名、CDN等，对加载文件的优化同样适用和需要考虑。
生产环境支持高级API
大多数情况下，在生产环境你可以放心地使用html5、es5的高级API，而不用像pc上那样考虑IE678不支持的问题。
小屏幕和支持触摸手势
所以交互方面通常与pc设计得不同，通常会把pc上一个页面完成的事情拆分成多个“页面”，并且会绑定很多触摸手势是操作。
meta viewport标签
移动端第一个要贴的代码就是这个viewport。每一个适用于移动端的网页，在head内部都有它，只是可能配置有所不同。
下面我们来看看每个属性具体的作用
有和无meta viewport标签
用这两个链接来对比一下，请用手机打开
在无meta viewport标签时，一般手机浏览器会将视口宽度设为大约980像素来呈现
width属性
在上一个例子中，有meta viewport标签时，我们将width属性设置为了device-width，它还可以设置为别的值，用手机打开下面这些链接对比一下（注意下面这些表现还有一个大前提是initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0，这些属性将在下面再讲述）
分别说一下它们的效果：
width=device-width的和上面有的链接和效果是一样的，即自动取当前设备商推荐的宽度作为视口的宽度
width=600，设备的宽度将被设为600px
width=200，或某个很小的数值，这里是为了说明，如果设置的width值小于当前设备商推荐的宽度，会被无视掉，此时width实际的值和width=device-width时是一样的，效果也是一样的
initial-scale | minimum-scale | maximum-scale
这三个属性定义初始时的缩放比例、最小缩放比例和最大缩放比例。便于表述，我们假设设置了width=device-width
我们在前面一直将他们设置成了1.0，这是一种常用的设置方法。在这种设置下，retina设备（window.devicePixelRatio === 2的设备）的4个硬件像素点将对应一个css像素点（长宽方向各为2:1）（这里牵涉到的硬件像素和css像素的概念，后面将会讲到）。举个例子：iPhone5的css像素将为320
alert(document.documentElement.getBoundingClientRect().width)// 320alert(window.innerWidth)// 320
另一种比较常用的设置方法是initial-scale=0.5,minimum-scale=0.5,maximum-scale=0.5，此时retina设备上1物理像素即为1css像素，常用在需要实现1物理像素的边线的情况下。可以拿retina屏幕的手机打开这个页面看看效果，并且与将它们都设为1时比对。
硬件像素与css像素
硬件像素与css像素与上一节强相关，我们现在来看看它
硬件像素
又称为物理像素，只于设备相关
css像素
在设备的硬件像素确定后，css像素与你设置的viewport相关：
设置为device-width时，有这样一个等式：
css像素=硬件像素/devicePixelRatio/当前scale
只有iPhone plus是一个例外，我们称为“缩减像素”，有兴趣的同学可以看这张图，这里就不详细展开了
当设置为具体数值时
设置值大于等于当前设备商推荐的宽度值时 css像素=设置数值，与scale无关
何时要按硬件像素计算？和何时要用css像素？
对于编写代码和用css构成的各种展现，使用css像素
对于任何原始图片的大小和切图时，若不考虑文件大小，则使用硬件像素
图片的处理
根据物理像素
理想情况下，使用与硬件像素1:1的图片是效果最好的。用retina的手机看看这个页面上的效果
保持长宽比的背景图
可以使用这个技巧来让背景图保持长宽比示例。它的中心思想是：
将padding-top\padding-bottom设置为百分比值时，这个百分比是宽度的百分比而不是高度的，由此撑高DOM元素
使用background-size: 100% 100%;将背景图平铺在整个DOM的区域内
为什么要使用背景图而不直接使用
呢？答案请移步这里
srcset
让浏览器自动选择适合的图片示例，有兴趣的同学可以自己找一些相关资料，这里不展开详细描述
布局
这部分@思霏同学后续会详细介绍和文章，这里简单过一下
弹性盒模型布局
语法：父元素：display:box / flex；子元素：box-flex:1 / 2 / 3
rem布局
需要与屏幕大小联动的元素，使用rem单位，不同屏幕时只需设置对应rem值即可，可以移步这个开源项目
思霏同学还基于这个项目开发了一个计算rem的工具，地址稍后更新上来
百分比布局
经典实用的方式，pc端流式布局也常用到
click延迟
在手持设备的浏览器上，由于两次连续“轻触”是“放大”的操作（即使你两次轻触的是一个链接或一个有click事件监听器的元素），所以在第一次被“轻触”后，浏览器需要先等一段时间，看看有没有所谓的“连续的第二次轻触”。如果有，则进行“放大”操作。没有，才敢放心地认为用户不是要放大，而是需要“click”至此才敢触发click事件，导致“短按（手指接触屏幕到离开屏幕的时间比较短）”的click事件通常约会延迟300ms左右。
我们通常有一些方式来规避掉这个问题，这部分@麦梓同学后续会有详细介绍，这里简单过一下
touchstart、touchend简单代替
使用zepto的tap事件代替对比：原生click与zepto-tap
使用fastclick对比：原生click与fastclick
交互方式
一般将按钮高度40css像素以上（width为device-width,各scale为1.0，其它情况需要对应换算）才能方便用户点击
点击和长按（tap & long tap）
swipe | pinch | gesture 这部分@金台同学后续会有详细介绍和文章，这里简单过一下
为不同的输入框弹起不同的虚拟键盘：keyboard
给用户及时反馈
比PC更需要更用户及时反馈的原因
没有实体按键
异步请求响应、本地耗能操作响应更慢
常用方式
菊花图
遮罩
disabled 按钮
*震动
远程真机调试方法
不论模拟器有多么强大，我们有时还是需要拿真实的手机来调试，这篇文章介绍了绝大部分远程真机调试方法
网友评论