HTML5：移動端開發入門
技術標籤：前端cssjavascripthtmlcssjavascript
HTML5:移動端開發入門
一、前言
-
常見的移動端開發分為移動版網站和響應式設計。
-
移動端開發可以讓技術人員專注於移動端的頁面優化，而無需在意桌面版的相容，但頁面一旦改動內容，維護成本就翻倍了；
-
響應式設計讓開發人員只需維護一份專案，節省開發和維護成本，不過缺點是需要做好移動端和桌面端的相容，也十分考驗頁面設計。
-
兩種開發方式孰強孰弱，暫無定論，本部落格主要探討一下移動端開發的技巧。
二、移動端開發技巧
1. Viewport設定
-
傳統桌面端網站的顯示視窗往往都是在1024X768的解析度以上開發的，遠遠大於移動端的視窗大小。為了使桌面端網頁能在移動端正常顯示，移動端瀏覽器推出了一種名為“viewport”的虛擬視窗，在不同的裝置中，這一視窗的大小都不同。（windows為1024px，ios為980px）
-
為了使移動裝置能完整顯示頁面，viewport往往被瀏覽器加上縮放以自適應寬度，讓980px的網頁顯示在320px的移動裝置上。這就是為什麼我們有些網頁在手機上看起來文字和圖片都很小。（此時用JavaScript獲取頁面寬度時，仍然為980px）
-
在移動端頁面中，我們可以在標籤中新增meta標籤，對viewport加以設定。
<meta name="viewport" content="width=device-width,initial-scale=1.0"></meta> -
上面這段程式碼做了兩件關鍵的事情：
- 設定viewport的寬度為裝置的寬度；
- 設定scale=1.0，即視窗預設不縮放；
-
如果你不希望使用者縮放你的頁面，可以像下面這樣做：
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,maxminscale=1.0"></meta>即鎖定頁面縮放為1.0，組織使用者進行縮放行為。
2. 百分比佈局
- 百分比佈局比傳統畫素佈局的優勢在於，當用戶進行縮放時，頁面佈局不會因為寬度改變而混亂。
- 當用戶縮放過大時，可能造成圖片或文字部分被遮擋的情況，可以通過以下方法來解決：
- 對於圖片，為其設定padding；
- 對於文字，可用vw來替代px。vw代表文字對viewport的寬度，vh代表高度，在vw體系中，viewport的寬度設定為100vw，依次來換算相對於的文字大小。
3. 彈性佈局：Flex
-
傳統的網頁充斥了大量的float，對瀏覽器渲染效能具有很大壓力。對此，有一種更加靈活的彈性盒子模型——Flex佈局。
-
關於彈性佈局的相關知識，請跳轉MDN網站進行學習，這裡不再贅述：
4. Media Query
-
移動端的解析度五花八門，高解析度圖片在低解析度的手機裡渲染壓力大，低解析度圖片在高解析度手機裡又十分模糊，兩種情況都非常糟糕。
-
對此，CSS3提供了一種名叫Media Query的顯示規則。
<link rel="stylesheet" href="./css/index.css" media="screen and (max-width: 600px)">上面的程式碼中，使用link標籤引入外部css檔案，同時增添了media屬性。下面對內容進行解釋：
- screen代表媒體的型別為電腦或者移動終端顯示螢幕（可用值：all,print,tv等）；
- and表示“與”的關係；
- (max-width: 600px)表示媒體的特性，需要放置在圓括號中，代表媒體最大的寬度就是660px；
- 所以整個media的含義是：當螢幕寬度小於等於600px時，該css檔案適用。
-
下面進行舉例：
screen and (min-width: 400px)：當螢幕寬度大於等於400px時，應用該css檔案；screen and (min-width: 400px) and (max-width: 600px):當螢幕寬度大於400px小於600px時，應用該css檔案；all and (max-device-width: 480px)：當裝置寬度小於等於480px時，應用該css檔案；all and (max-device-width: 481px) and (max-device-width: 1024px) and (orientation: portrait)：當所有媒體裝置寬度介於481px與1024px之間時，應用該css檔案。當portrait改為landscape時，則表示匹配橫屏的媒體。
-
有了media query，我們就可以針對不同螢幕解析度的裝置分別製作相應的css檔案：
<!-- 針對所有裝置的基礎樣式 --> <link rel="stylesheet" href="./css/base.css"> <!-- <=480的手機可用 --> <link rel="stylesheet" href="./css/css480.css" media="all and (max-device-width: 480px)"> <!-- 480<px<1024的手機可用 --> <link rel="stylesheet" href="./css/css481_1024.css" media="all and (min-device-width: 481px) and (max-device-width: 1024px)"> <!-- >=1024的手機可用 --> <link rel="stylesheet" href="./css/css1024+.css" media="all and (min device-width: 1024px)"> -
當然，我們也可以在css檔案中指定對應的限制：
@media all and (max-device-width: 480px){ h1 { font-size : 24px; } }需要注意的是，對應規則的css程式碼必須放在media的括號中。
5. spite圖
-
在桌面端中，檔案的並行下載早就受到了關注，在移動端更加引起重視，在移動裝置中，並行下載的檔案數量十分有限，一般在4~5個。檔案多了會影響頁面的載入速度。
-
為了解決圖片數量下載的問題，雪碧圖是一個很好的選擇。
-
下面舉個例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>Document</title> <style> *{ padding: 0; margin: 0; } ul{ list-style: none; } li{ width: 250px; float: left; position: relative; font-size: 32px; color: #565656; border-bottom: 1px solid #ccc; line-height: 170px; text-indent: 180px; } li::before{ content: ""; width: 170px; height: 170px; background: url(./image/color.jpg) no-repeat; position: absolute; left: 10px; } li:nth-child(1)::before{ background-position: 0 0px; } li:nth-child(2)::before{ background-position: 0 -170px; } li:nth-child(3)::before{ background-position: 0 -350px; } li:nth-child(4)::before{ background-position: -170px 0px; } li:nth-child(5)::before{ background-position: -170px -180px; } li:nth-child(6)::before{ background-position: -170px -350px; } li:nth-child(7)::before{ background-position: -340px 0; } li:nth-child(8)::before{ background-position: -340px -190px; } li:nth-child(9)::before{ background-position: -340px -340px; } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </body> </html>顯示結果：
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-Eu7BTnHp-1608449983287)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201218220059756.png)]
- 利用spite圖，可以減少並行圖片的下載，加快渲染速度。
6. 圖示字型
-
圖示字型是取代圖片，用來展現特殊圖示和特殊字型的一種重要手段，其普及的速度十分之快，一些著名的網站如：阿里巴巴向量圖示庫、fontawesome等都有許多精美的圖示字型；
-
下面我們利用一套圖示來演示一下圖示字型的用法：
-
以FlatUI為例，先從官網上下載相關字型檔案，引入頁面：
@font-face{ font-family: 'flat-ui-pro-icons-regular'; /*三選一*/ src: url('./font/glyphicons/flat-ui-pro-icons-regular.ttf'), /*常見的向量字型封裝格式*/ url("./font/glyphicons/flat-ui-pro-icons-regular.eot"), /*SFNT子集化後壓縮*/ url('./font/glyphicons/flat-ui-pro-icons-regular.woff'); /*SFNT壓縮後的檔案*/ } -
新建一個h1標籤，在其before偽類中引入字型，注意：
content的內容為unicode編碼：h1::before{ font-family: 'flat-ui-pro-icons-regular'; content: '\e608'; margin-left: 20px; } -
最終在頁面的呈現效果：
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-SXclI366-1608449983290)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201220145243225.png)]
-
值得一提的是，圖示字型的顏色可以跟隨標籤的顏色而改變；若要使用彩色的icon時，單色的圖示字型時無法實現的，需要用svg或者圖片來實現。
-
7. 移動端的互動
-
在移動裝置上，人們的互動方式由滑鼠鍵盤轉變為觸控，因此，一遍的互動事件也需要換成適合移動端的事件；
-
傳統的click事件在移動裝置上會有大約1s的延遲，因為手機瀏覽器需要判斷使用者時長按還是點選；
-
要使移動端的體驗更為流暢，可將點選事件換為touch事件：
let btn = document.getElementById('btn'); btn.addEventListener('touchstart',function(ev){ console.log(ev.touches.length) }) document.body.addEventListener('touchmove',function(ev){ console.log(ev.target) }) -
touch中共有touchstart、touchmove和touchend三個事件；
**touchstart：**觸控開始的時候觸發
**touchmove：**手指在螢幕上滑動的時候觸發
**touchend：**觸控結束的時候觸發
-
並且每個觸控事件都包括了三個觸控列表，每個列表裡包含了對應的一系列觸控點（用來實現多點觸控）：
touches：當前位於螢幕上的所有手指的列表；
targetTouches：位於當前DOM元素上的手指列表；
changedTouches: 涉及當前事件手指的列表。
-
每個觸控點由包含了如下觸控資訊（常用）：
dentifier：一個數值，唯一標識觸控會話（touch session）中的當前手指。一般為從0開始的流水號（android4.1，uc）
target：DOM元素，是動作所針對的目標。
pageX/pageY/clientX/clientY/screenX/screenY：一個數值，動作在螢幕上發生的位置（page包含滾動距離,client不包含滾動距離，screen則以螢幕為基準）。
-
除了touch事件外，ios還提供了gesture事件，即多指操作。當有兩根以上的手指觸控式螢幕幕時，就會觸發該事件：
document.body.addEventListener('gesturechange',function(ev){ console.log("手指旋轉角度為：" + ev.rotation); console.log("手指旋縮放為：" + ev.scale); }) -
gesture 事件如下：
gesturestart：當一個手指已經按在螢幕上，另一個手指又觸控式螢幕幕的時候觸發。類似於touchstart的作用一樣；
gesturechange：當觸控式螢幕幕的任何一個手指的位置發生變化的時候觸發。gestureend：當任何一個手指從螢幕上面移開時觸發。
8. 一些小細節
-
獲取使用者客戶端資訊：
console.log(navigator.userAgent); -
獲取到客戶端資訊後，可利用正則表示式進行判斷，並推送不同規則的css樣式或者頁面跳轉。詳情請見這篇文章：
-
獲取使用者的網路環境：
console.log(navigator.connection.type); -
獲取使用者螢幕狀態：
console.log(window.orientation || screen.orientation); -
設定開啟首頁（IOS）：
<link rel="apple-touch-startup-image" href="start.png"> -
設定iTunes連結：
<meta name="apple-itunes-app" content="app-id=123456">
三、移動端開發框架
-
Zepto——移動端的jQuery。Zepto的使用方式與jQuery幾乎一致，並且為移動端開發提供了不少介面。
-
BootStrap、Foundation、Semantic、Amaze——前端開發框架，提供了一系列元件和樣式，方便開發者使用；
-
Flat UI、BootMetro、Pure、Colors——設計工具包。Flat UI提供了一系列頁面的基礎元素——圖示字型、向量圖形等，注重設計方面的美感，對於設計感不足的開發者十分良好。
-
D3——視覺化工具。如果要在網頁中展現大量圖表和資料，視覺化工具只需簡單的程式碼，就可以完成各種高大上的圖表。
-
Hammer——輕鬆控制觸控手勢。Hammer.js提供了tap、doubletap、pinch（二指撥動）、rotation、swipe、pan（慢速拖動）等手勢事件沒事的複雜的手勢變得簡單起來。切具有良好的相容性，能識別市面上大多是移動裝置。