從零開始學習移動(dòng)端Web開發

發表時間：2017-5-11

發布人：葵宇科技

浏覽次數：27

背景

這裡寫圖片描述

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

基礎準備

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

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

移動(dòng)端網頁開發
在移動(dòng)端表現良好的頁面，如(rú)新浪網，騰訊新聞網，手機鳳凰這些網站(zhàn)頁面在移動(dòng)端也有不錯的表現。
移動(dòng)端web app開發
簡單來說就是在開發中(zhōng)使用一些浏覽器(qì)私有的方法，使得web頁面擁有一些native的功能。或者更多的是如(rú)手機taobao，手機美團，手機微博等類似web app，他們沒有很明顯的使用一些native功能，但是交互、設計的和(hé)app類似的網頁，它是要依托浏覽器(qì)來查看的。當然近期行業(yè)内還推出了多種形式的類app/webapp應用技術(shù)，比如(rú)大家熟知的微信小程序、谷歌推出的PWA（獲得與安卓原生應用同等權限）、DCloud公司推出的流應用（獲得W3C及國内手機廠商(shāng)支持）等。
hybrid app開發
也叫【套殼開發】，簡單來說就是通(tōng)過寫特定的代碼生成跨平台的web app，類似react native，phonegap，cocos2d等。可(kě)以用一些前端native開發框架或者是在移動(dòng)端網頁的基礎上打包生成app。

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

動(dòng)手實踐

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>艦炮與魚雷特權</title>
    </head>

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

html代碼中(zhōng)最關(guān)鍵的就是meta标簽設置，開發移動(dòng)端頁面首先一定要設置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 - 用戶是否可(kě)以手動(dòng)縮放

當然這隻是一種方案，其次是一些輔助優化功能，常用的有如(rú)下(xià)meta标簽：

<meta content="telephone=no,email=no" name="format-detection">
//禁止自動(dòng)識别電話号碼和(hé)郵箱
<meta content="yes" name="apple-mobile-web-app-capable">
//蘋果手機：會删除默認的工具欄和(hé)菜單欄，網站(zhàn)開啟對web app程序的支持
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
//蘋果手機：在web app應用下(xià)狀态條（屏幕頂部條）的顔色,默認值為default（白色），可(kě)以定為black（黑色）和(hé)black-translucent（灰色半透明）。
<meta name="apple-touch-fullscreen" content="yes" />
//蘋果手機：如(rú)果把一個(gè)web app添加到了主屏幕中(zhōng)，那麼從主屏幕中(zhōng)打開這個(gè)web app則全屏顯示
<link rel="apple-touch-icon" href="/static/images/identity/HTML5_Badge_64.png" />
//蘋果手機：将應用添加到手機主屏幕，會有一個(gè)icon可(kě)以直接進入

CSS示例

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

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

最終效果

問(wèn)題和(hé)優化

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

移動(dòng)端開發的優劣

優勢：
移動(dòng)端開發的優勢簡單來說就是兼容性更好了，基本上隻需要針對webkit内核的浏覽器(qì)做兼容就好了，而且本身這類浏覽器(qì)對html5、css3的兼容性就比較高，所以PC端不太敢用的屬性就大膽的用起來吧。
移動(dòng)端還可(kě)以使用很多設備接口來實現更好的交互效果，比如(rú)陀螺儀實現類似3D VR效果，多指操作實現圖片縮放旋轉，獲取地理位置等。

劣勢：
移動(dòng)端目前設備類型特别多，移動(dòng)端的适配比較難處理，移動(dòng)端的事件也是一個(gè)難題，比如(rú)tap延遲，點擊穿透等問(wèn)題。

擴展

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

總結

本文(wén)主要介紹了如(rú)何快速切入到移動(dòng)Web開發，并介紹了開發中(zhōng)可(kě)能會遇到的常見問(wèn)題，雖然沒有具體介紹，因為這不是本文(wén)的主要目的，目的是希望讀者在閱讀之後對移動(dòng)Web開發有個(gè)大緻的了解，然後在實際開發工作中(zhōng)不斷積累。
本文(wén)介紹方式是根據我自己的學習方式來描述的，先實現一個(gè)DEMO，獲得一點成就感之後才有勇氣面對開發中(zhōng)無數的坑嘛！希望對大家有幫助！