從零開始學(xué)習(xí)移動端Web開發(fā)

發(fā)表時間：2017-5-11

發(fā)布人：葵宇科技

瀏覽次數(shù)：40

背景

這里寫圖片描述

近年來，隨著智能手機的普及，移動端開發(fā)受到了異常的關(guān)注。從傳統(tǒng)的安卓、IOS原生手機系統(tǒng)應(yīng)用開發(fā)，轉(zhuǎn)向了移動端Web開發(fā)或者是混合開發(fā)，既然有需求，那就讓我們一起來學(xué)習(xí)移動端Web開發(fā)吧。本文旨在讓讀者以最快的時間了解移動Web開發(fā)基礎(chǔ)以及介紹一些常見問題。

基礎(chǔ)準備

首先我們要有HTML/HTML5、CSS/CSS3基礎(chǔ)知識（會簡單的切圖就可以了），如果能懂點JS那就更好啦。

其次我們要清楚一些基本概念，不然出去吹牛逼聽不懂別人說的東西或者自己說出來是非常明顯的錯誤就很尷尬啦，為了能自信滿滿的吹水，我們來了解下面幾個基本概念吧。

移動端網(wǎng)頁開發(fā)
在移動端表現(xiàn)良好的頁面，如新浪網(wǎng)，騰訊新聞網(wǎng)，手機鳳凰這些網(wǎng)站頁面在移動端也有不錯的表現(xiàn)。
移動端web app開發(fā)
簡單來說就是在開發(fā)中使用一些瀏覽器私有的方法，使得web頁面擁有一些native的功能?；蛘吒嗟氖侨缡謾Ctaobao，手機美團，手機微博等類似web app，他們沒有很明顯的使用一些native功能，但是交互、設(shè)計的和app類似的網(wǎng)頁，它是要依托瀏覽器來查看的。當然近期行業(yè)內(nèi)還推出了多種形式的類app/webapp應(yīng)用技術(shù)，比如大家熟知的微信小程序、谷歌推出的PWA（獲得與安卓原生應(yīng)用同等權(quán)限）、DCloud公司推出的流應(yīng)用（獲得W3C及國內(nèi)手機廠商支持）等。
hybrid app開發(fā)
也叫【套殼開發(fā)】，簡單來說就是通過寫特定的代碼生成跨平臺的web app，類似react native，phonegap，cocos2d等?？梢杂靡恍┣岸薾ative開發(fā)框架或者是在移動端網(wǎng)頁的基礎(chǔ)上打包生成app。

基本概念有了，最后我們要有一張基于移動端尺寸的設(shè)計稿，比如750px，720px，640px等都可以。比如下面這張圖。接下來我們就來實現(xiàn)這個移動端頁面。

動手實踐

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" />
        <title>艦炮與魚雷特權(quán)</title>
    </head>

    <body>
        具體布局就不展示了
    </body>
</html>

html代碼中最關(guān)鍵的就是meta標簽設(shè)置，開發(fā)移動端頁面首先一定要設(shè)置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 - 設(shè)備的寬度
initial-scale - 初始的縮放比例  
minimum-scale - 允許用戶縮放到的最小比例   
maximum-scale - 允許用戶縮放到的最大比例  
user-scalable - 用戶是否可以手動縮放

當然這只是一種方案，其次是一些輔助優(yōu)化功能，常用的有如下meta標簽：

<meta content="telephone=no,email=no" name="format-detection">
//禁止自動識別電話號碼和郵箱
<meta content="yes" name="apple-mobile-web-app-capable">
//蘋果手機：會刪除默認的工具欄和菜單欄，網(wǎng)站開啟對web app程序的支持
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
//蘋果手機：在web app應(yīng)用下狀態(tài)條（屏幕頂部條）的顏色,默認值為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" />
//蘋果手機：將應(yīng)用添加到手機主屏幕，會有一個icon可以直接進入

CSS示例

//部分重置
body {
    word-wrap: break-word;
    font: 16px/1.5 Helvetica, Arial;
    //這里是設(shè)置字體，Helvetica字體在移動端各系統(tǒng)都支持（都不支持微軟雅黑）
    color: #333;
    -webkit-text-size-adjust: none; 
    //設(shè)置文本不會放大，普通網(wǎng)頁在移動端打開文本是會跟隨網(wǎng)頁結(jié)構(gòu)縮放的
}
body *{
    -webkit-tap-highlight-color: transparent;
    //在一些手機上，如iphone，點擊按鈕等元素會出現(xiàn)點擊態(tài)的背景色，設(shè)置為透明就看不出來了
    -webkit-user-select:none;
    //設(shè)置元素內(nèi)的文字及其子元素將不會被選中
}
//部分樣式
.pack-sub em{
  width:38px;
  height:20px;
  display: inline-block;
  margin-left: 3px;
  font-size: 14px;
  background-color: #ff599b;
  border-radius: 20px;
}

css中，關(guān)鍵點一是重置樣式和PC端有點不同，二是css的數(shù)值應(yīng)該是設(shè)計稿中的一半，以750px為例（因為最常見的iPhone6的屏幕尺寸為375px，設(shè)計稿是手機屏幕的兩倍大小，所以css中的數(shù)值按設(shè)計稿一半計算）

最終效果

問題和優(yōu)化

細心的我們發(fā)現(xiàn)，目前的實現(xiàn)在iPhone6下是很友好的，但是在其他設(shè)備上，比如小屏的iPhone4或者類型更多的安卓手機，表現(xiàn)并不是很好。這時我們會去搜索移動端適配解決方案，有js+rem的方式，也有淘寶Flexible的解決方案，我們應(yīng)該去了解并實踐咯。
傳送門：
移動web適配利器-rem
使用Flexible實現(xiàn)手淘H5頁面的終端適配

移動端開發(fā)的優(yōu)劣

優(yōu)勢：
移動端開發(fā)的優(yōu)勢簡單來說就是兼容性更好了，基本上只需要針對webkit內(nèi)核的瀏覽器做兼容就好了，而且本身這類瀏覽器對html5、css3的兼容性就比較高，所以PC端不太敢用的屬性就大膽的用起來吧。
移動端還可以使用很多設(shè)備接口來實現(xiàn)更好的交互效果，比如陀螺儀實現(xiàn)類似3D VR效果，多指操作實現(xiàn)圖片縮放旋轉(zhuǎn)，獲取地理位置等。

劣勢：
移動端目前設(shè)備類型特別多，移動端的適配比較難處理，移動端的事件也是一個難題，比如tap延遲，點擊穿透等問題。

擴展

要想處理好移動Web開發(fā)，我們還需要很多知識儲備，很多問題需要找到比較好的解決方案，下面列舉一些常見問題及可供學(xué)習(xí)的資料。
1.設(shè)備視口及像素比
2.淺談移動Web開發(fā)（上）：深入概念
3.移動端自適應(yīng)方案
4.移動端 Web 開發(fā)前端知識整理
5.移動端事件介紹

總結(jié)

本文主要介紹了如何快速切入到移動Web開發(fā)，并介紹了開發(fā)中可能會遇到的常見問題，雖然沒有具體介紹，因為這不是本文的主要目的，目的是希望讀者在閱讀之后對移動Web開發(fā)有個大致的了解，然后在實際開發(fā)工作中不斷積累。
本文介紹方式是根據(jù)我自己的學(xué)習(xí)方式來描述的，先實現(xiàn)一個DEMO，獲得一點成就感之后才有勇氣面對開發(fā)中無數(shù)的坑嘛！希望對大家有幫助！