從pc前端開發(fā)遷移到mobile
這篇文章特別適用于有一定pc前端開發(fā)經(jīng)驗(yàn)，想要學(xué)習(xí)或了解移動(dòng)端（mobile）的前端開發(fā)的同學(xué)來閱讀擅威。全文將分門別類來講述移動(dòng)端前端開發(fā)與pc端的不同之處魁淳。
mobile前端開發(fā)主要特點(diǎn)
OPOA
mobile端OPOA（單頁應(yīng)用飘诗，有時(shí)也稱SPA）的比例比PC端要大，主要有這樣一些原因：
在生產(chǎn)環(huán)境界逛，瀏覽器對(duì)高級(jí)API昆稿、html5、es5支持較好
OPOA通常與SEO是一對(duì)天敵息拜，而移動(dòng)端搜索引擎的地位較弱溉潭，SEO沒有那么重要
這些網(wǎng)頁有時(shí)需要內(nèi)嵌到app中，app中做頁面跳轉(zhuǎn)比較復(fù)雜和耗能该溯、耗時(shí)間岛抄，不如所有功能在一個(gè)頁面內(nèi)完成
另外，mobile端優(yōu)化到一定程度還關(guān)注模板在服務(wù)器端渲染還是在客戶端端渲染狈茉。
性能弱
移動(dòng)設(shè)備相對(duì)pc夫椭，計(jì)算能力、內(nèi)存都比較弱氯庆。應(yīng)該避免復(fù)雜的組件和大量的DOM寫入操作蹭秋；對(duì)于大量的數(shù)據(jù)計(jì)算操作，應(yīng)該在服務(wù)器端完成或交給異步的Worker接口計(jì)算堤撵。
流量敏感仁讨、高延遲
在移動(dòng)端每個(gè)文件、請(qǐng)求的大小都需要考慮实昨，因?yàn)楹芏嘤脩粜枰獮槊恳籯b的流量付費(fèi)洞豁，并且為此付出等待加載的時(shí)間。
在每個(gè)請(qǐng)求里，不同的網(wǎng)絡(luò)環(huán)境下有著不同的網(wǎng)絡(luò)延遲丈挟，4G網(wǎng)絡(luò)的延遲大概是20ms刁卜，3G網(wǎng)絡(luò)的延遲大概是100ms，所以減少請(qǐng)求數(shù)的優(yōu)化曙咽，比在PC上收益更大蛔趴。
但也不要極端地追求減少連接數(shù)，合理的并行下載例朱、多域名孝情、CDN等，對(duì)加載文件的優(yōu)化同樣適用和需要考慮洒嗤。
生產(chǎn)環(huán)境支持高級(jí)API
大多數(shù)情況下箫荡，在生產(chǎn)環(huán)境你可以放心地使用html5、es5的高級(jí)API烁竭，而不用像pc上那樣考慮IE678不支持的問題菲茬。
小屏幕和支持觸摸手勢(shì)
所以交互方面通常與pc設(shè)計(jì)得不同，通常會(huì)把pc上一個(gè)頁面完成的事情拆分成多個(gè)“頁面”派撕，并且會(huì)綁定很多觸摸手勢(shì)是操作婉弹。
meta viewport標(biāo)簽
移動(dòng)端第一個(gè)要貼的代碼就是這個(gè)viewport。每一個(gè)適用于移動(dòng)端的網(wǎng)頁终吼，在head內(nèi)部都有它镀赌，只是可能配置有所不同。
下面我們來看看每個(gè)屬性具體的作用
有和無meta viewport標(biāo)簽
用這兩個(gè)鏈接來對(duì)比一下际跪，請(qǐng)用手機(jī)打開
在無meta viewport標(biāo)簽時(shí)商佛，一般手機(jī)瀏覽器會(huì)將視口寬度設(shè)為大約980像素來呈現(xiàn)
width屬性
在上一個(gè)例子中，有meta viewport標(biāo)簽時(shí)姆打，我們將width屬性設(shè)置為了device-width良姆，它還可以設(shè)置為別的值，用手機(jī)打開下面這些鏈接對(duì)比一下（注意下面這些表現(xiàn)還有一個(gè)大前提是initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0幔戏，這些屬性將在下面再講述）
分別說一下它們的效果：
width=device-width的和上面有的鏈接和效果是一樣的，即自動(dòng)取當(dāng)前設(shè)備商推薦的寬度作為視口的寬度
width=600闲延，設(shè)備的寬度將被設(shè)為600px
width=200痊剖，或某個(gè)很小的數(shù)值，這里是為了說明垒玲，如果設(shè)置的width值小于當(dāng)前設(shè)備商推薦的寬度陆馁，會(huì)被無視掉，此時(shí)width實(shí)際的值和width=device-width時(shí)是一樣的合愈，效果也是一樣的
initial-scale | minimum-scale | maximum-scale
這三個(gè)屬性定義初始時(shí)的縮放比例叮贩、最小縮放比例和最大縮放比例击狮。便于表述，我們假設(shè)設(shè)置了width=device-width
我們?cè)谇懊嬉恢睂⑺麄冊(cè)O(shè)置成了1.0妇汗，這是一種常用的設(shè)置方法帘不。在這種設(shè)置下，retina設(shè)備（window.devicePixelRatio === 2的設(shè)備）的4個(gè)硬件像素點(diǎn)將對(duì)應(yīng)一個(gè)css像素點(diǎn)（長寬方向各為2:1）（這里牽涉到的硬件像素和css像素的概念杨箭，后面將會(huì)講到）。舉個(gè)例子：iPhone5的css像素將為320
alert(document.documentElement.getBoundingClientRect().width)// 320alert(window.innerWidth)// 320
另一種比較常用的設(shè)置方法是initial-scale=0.5,minimum-scale=0.5,maximum-scale=0.5储狭，此時(shí)retina設(shè)備上1物理像素即為1css像素互婿，常用在需要實(shí)現(xiàn)1物理像素的邊線的情況下×杀罚可以拿retina屏幕的手機(jī)打開這個(gè)頁面看看效果慈参，并且與將它們都設(shè)為1時(shí)比對(duì)。
硬件像素與css像素
硬件像素與css像素與上一節(jié)強(qiáng)相關(guān)刮萌，我們現(xiàn)在來看看它
硬件像素
又稱為物理像素驮配，只于設(shè)備相關(guān)
css像素
在設(shè)備的硬件像素確定后，css像素與你設(shè)置的viewport相關(guān)：
設(shè)置為device-width時(shí)着茸，有這樣一個(gè)等式：
css像素=硬件像素/devicePixelRatio/當(dāng)前scale
只有iPhone plus是一個(gè)例外壮锻，我們稱為“縮減像素”，有興趣的同學(xué)可以看這張圖涮阔，這里就不詳細(xì)展開了
當(dāng)設(shè)置為具體數(shù)值時(shí)
設(shè)置值大于等于當(dāng)前設(shè)備商推薦的寬度值時(shí) css像素=設(shè)置數(shù)值猜绣，與scale無關(guān)
何時(shí)要按硬件像素計(jì)算？和何時(shí)要用css像素敬特？
對(duì)于編寫代碼和用css構(gòu)成的各種展現(xiàn)掰邢，使用css像素
對(duì)于任何原始圖片的大小和切圖時(shí)，若不考慮文件大小伟阔，則使用硬件像素
圖片的處理
根據(jù)物理像素
理想情況下辣之，使用與硬件像素1:1的圖片是效果最好的。用retina的手機(jī)看看這個(gè)頁面上的效果
保持長寬比的背景圖
可以使用這個(gè)技巧來讓背景圖保持長寬比示例皱炉。它的中心思想是：
將padding-top\padding-bottom設(shè)置為百分比值時(shí)怀估，這個(gè)百分比是寬度的百分比而不是高度的，由此撐高DOM元素
使用background-size: 100% 100%;將背景圖平鋪在整個(gè)DOM的區(qū)域內(nèi)
為什么要使用背景圖而不直接使用
呢娃承？答案請(qǐng)移步這里
srcset
讓瀏覽器自動(dòng)選擇適合的圖片示例奏夫，有興趣的同學(xué)可以自己找一些相關(guān)資料，這里不展開詳細(xì)描述
布局
這部分@思霏同學(xué)后續(xù)會(huì)詳細(xì)介紹和文章历筝，這里簡單過一下
彈性盒模型布局
語法：父元素：display:box / flex酗昼；子元素：box-flex:1 / 2 / 3
兩個(gè)例子：webkit-box/1webkit-box/2
rem布局
需要與屏幕大小聯(lián)動(dòng)的元素，使用rem單位梳猪，不同屏幕時(shí)只需設(shè)置對(duì)應(yīng)rem值即可麻削，可以移步這個(gè)開源項(xiàng)目
思霏同學(xué)還基于這個(gè)項(xiàng)目開發(fā)了一個(gè)計(jì)算rem的工具蒸痹，地址稍后更新上來
百分比布局
經(jīng)典實(shí)用的方式，pc端流式布局也常用到
click延遲
在手持設(shè)備的瀏覽器上呛哟，由于兩次連續(xù)“輕觸”是“放大”的操作（即使你兩次輕觸的是一個(gè)鏈接或一個(gè)有click事件監(jiān)聽器的元素）叠荠，所以在第一次被“輕觸”后，瀏覽器需要先等一段時(shí)間扫责，看看有沒有所謂的“連續(xù)的第二次輕觸”榛鼎。如果有，則進(jìn)行“放大”操作鳖孤。沒有者娱，才敢放心地認(rèn)為用戶不是要放大，而是需要“click”至此才敢觸發(fā)click事件苏揣，導(dǎo)致“短按（手指接觸屏幕到離開屏幕的時(shí)間比較短）”的click事件通常約會(huì)延遲300ms左右黄鳍。
我們通常有一些方式來規(guī)避掉這個(gè)問題，這部分@麥梓同學(xué)后續(xù)會(huì)有詳細(xì)介紹平匈，這里簡單過一下
touchstart框沟、touchend簡單代替
使用zepto的tap事件代替對(duì)比：原生click與zepto-tap
使用fastclick對(duì)比：原生click與fastclick
交互方式
一般將按鈕高度40css像素以上（width為device-width,各scale為1.0，其它情況需要對(duì)應(yīng)換算）才能方便用戶點(diǎn)擊
點(diǎn)擊和長按（tap & long tap）
swipe | pinch | gesture 這部分@金臺(tái)同學(xué)后續(xù)會(huì)有詳細(xì)介紹和文章增炭，這里簡單過一下
為不同的輸入框彈起不同的虛擬鍵盤：keyboard
給用戶及時(shí)反饋
比PC更需要更用戶及時(shí)反饋的原因
沒有實(shí)體按鍵
異步請(qǐng)求響應(yīng)忍燥、本地耗能操作響應(yīng)更慢
常用方式
菊花圖
遮罩
disabled 按鈕
*震動(dòng)
遠(yuǎn)程真機(jī)調(diào)試方法
不論模擬器有多么強(qiáng)大，我們有時(shí)還是需要拿真實(shí)的手機(jī)來調(diào)試弟跑，這篇文章介紹了絕大部分遠(yuǎn)程真機(jī)調(diào)試方法
