從零開始學習移動端Web開發
背景
近年來，隨著智慧手機的普及，移動端開發受到了異常的關注。從傳統的安卓、IOS原生手機系統應用開發，轉向了移動端Web開發或者是混合開發，既然有需求，那就讓我們一起來學習移動端Web開發吧。本文旨在讓讀者以最快的時間瞭解移動Web開發基礎以及介紹一些常見問題。
基礎準備
首先我們要有HTML/HTML5、CSS/CSS3基礎知識（會簡單的切圖就可以了） ，如果能懂點JS那就更好啦。
其次我們要清楚一些基本概念，不然出去吹牛逼聽不懂別人說的東西或者自己說出來是非常明顯的錯誤就很尷尬啦，為了能自信滿滿的吹水，我們來了解下面幾個基本概念吧。
移動端網頁開發
在移動端表現良好的頁面，如新浪網，騰訊新聞網，手機鳳凰這些網站頁面在移動端也有不錯的表現。移動端web app開發
簡單來說就是在開發中使用一些瀏覽器私有的方法，使得web頁面擁有一些native的功能。或者更多的是如手機taobao，手機美團，手機微博等類似web app，他們沒有很明顯的使用一些native功能，但是互動、設計的和app類似的網頁，它是要依託瀏覽器來檢視的。當然近期行業內還推出了多種形式的類app/webapp應用技術，比如大家熟知的微信小程式、谷歌推出的PWA（獲得與安卓原生應用同等許可權）、DCloud公司推出的流應用（獲得W3C及國內手機廠商支援）等。hybrid app開發
也叫【套殼開發】，簡單來說就是通過寫特定的程式碼生成跨平臺的web app，類似react native，phonegap，cocos2d等。可以用一些前端native開發框架或者是在移動端網頁的基礎上打包生成app。
基本概念有了，最後我們要有一張基於移動端尺寸的設計稿，比如750px，720px，640px等都可以。比如下面這張圖。接下來我們就來實現這個移動端頁面。
動手實踐
HTML示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" html程式碼中最關鍵的就是meta標籤設定，開發移動端頁面首先一定要設定viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
device-width - 裝置的寬度
initial-scale - 初始的縮放比例
minimum-scale - 允許使用者縮放到的最小比例
maximum-scale - 允許使用者縮放到的最大比例
user-scalable - 使用者是否可以手動縮放 當然這只是一種方案，其次是一些輔助優化功能，常用的有如下meta標籤：
<meta content="telephone=no,email=no" name="format-detection">
//禁止自動識別電話號碼和郵箱
<meta content="yes" name="apple-mobile-web-app-capable">
//蘋果手機：會刪除預設的工具欄和選單欄，網站開啟對web app程式的支援
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
//蘋果手機：在web app應用下狀態條（螢幕頂部條）的顏色,預設值為default（白色），可以定為black（黑色）和black-translucent（灰色半透明）。
<meta name="apple-touch-fullscreen" content="yes" />
//蘋果手機：如果把一個web app新增到了主螢幕中，那麼從主螢幕中開啟這個web app則全屏顯示
<link rel="apple-touch-icon" href="/static/images/identity/HTML5_Badge_64.png" />
//蘋果手機：將應用新增到手機主螢幕，會有一個icon可以直接進入
CSS示例
//部分重置
body {
word-wrap: break-word;
font: 16px/1.5 Helvetica, Arial;
//這裡是設定字型，Helvetica字型在移動端各系統都支援（都不支援微軟雅黑）
color: #333;
-webkit-text-size-adjust: none;
//設定文字不會放大，普通網頁在移動端開啟文字是會跟隨網頁結構縮放的
}
body *{
-webkit-tap-highlight-color: transparent;
//在一些手機上，如iphone，點選按鈕等元素會出現點選態的背景色，設定為透明就看不出來了
-webkit-user-select:none;
//設定元素內的文字及其子元素將不會被選中
}
//部分樣式
.pack-sub em{
width:38px;
height:20px;
display: inline-block;
margin-left: 3px;
font-size: 14px;
background-color: #ff599b;
border-radius: 20px;
}css中，關鍵點一是重置樣式和PC端有點不同，二是css的數值應該是設計稿中的一半，以750px為例（因為最常見的iPhone6的螢幕尺寸為375px，設計稿是手機螢幕的兩倍大小，所以css中的數值按設計稿一半計算）
最終效果
問題和優化
細心的我們發現，目前的實現在iPhone6下是很友好的，但是在其他裝置上，比如小屏的iPhone4或者型別更多的安卓手機，表現並不是很好。這時我們會去搜索移動端適配解決方案，有js+rem的方式，也有淘寶Flexible的解決方案，我們應該去了解並實踐咯。
傳送門：
移動web適配利器-rem
使用Flexible實現手淘H5頁面的終端適配
移動端開發的優劣
優勢：
移動端開發的優勢簡單來說就是相容性更好了，基本上只需要針對webkit核心的瀏覽器做相容就好了，而且本身這類瀏覽器對html5、css3的相容性就比較高，所以PC端不太敢用的屬性就大膽的用起來吧。
移動端還可以使用很多裝置介面來實現更好的互動效果，比如陀螺儀實現類似3D VR效果，多指操作實現圖片縮放旋轉，獲取地理位置等。
劣勢：
移動端目前裝置型別特別多，移動端的適配比較難處理，移動端的事件也是一個難題，比如tap延遲，點選穿透等問題。
擴充套件
總結
本文主要介紹瞭如何快速切入到移動Web開發，並介紹了開發中可能會遇到的常見問題，雖然沒有具體介紹，因為這不是本文的主要目的，目的是希望讀者在閱讀之後對移動Web開發有個大致的瞭解，然後在實際開發工作中不斷積累。
本文介紹方式是根據我自己的學習方式來描述的，先實現一個DEMO，獲得一點成就感之後才有勇氣面對開發中無數的坑嘛！希望對大家有幫助！