摘要：游戲平臺也在推出了三款新的在移動設備瀏覽器上運行的基于的游戲等等。實質上是沒有關系的，在做移動端開發，由于移動端對于的支持還是很不錯的。移動端輔助參數推出之后又給賦予了新的使命。使用普通滾動，當手指從觸摸屏上移開，滾動會立即停止。

隨著前端技術的急速發展，隨著互聯網行業的日益發展，HTML5作為一種比較新型的開發技術早已經被很多大的企業所應用，通過HTML5語言可以開發適用于任何設備上的酷炫網站頁面，所以HTML5的發展趨勢可想而知。話說HTML5推出了也好長一段時間了，現在還拿出來炒冷飯O(∩_∩)O哈哈~

HTML5與SEO

為了更好地處理今天的互聯網應用，HTML5添加了很多新元素及功能，比如：圖形的繪制，多媒體內容，更好的頁面結構，更好的形式處理，和幾個Api拖放元素，定位，包括網頁 應用程序緩存，存儲，網絡工作者。HTML5推出一個很重要的概念就是語義化標簽。這一概念給網頁的SEO帶來了很大的幫助。

使搜索引擎更加容易抓取和索引

對于一些網站，特別是那些嚴重依賴于FLASH的網站HTML5是一個大福音。如果你有一個都是FLASH的站點，你就一定會看到切換到HTML5的好處。首先，搜索引擎的蜘蛛將能夠抓取你的站點和索引你的內容。所有嵌入到動畫中的內容將全部可以被搜索引擎讀取。在搜索引擎優化的基本理論中，這一方面將會驅動你的網站獲得更多的右擊流量。

提供更多的功能，提高用戶的友好體驗

使用HTML5的另一個好處就是它可以增加更多的功能。對于HTML5的功能性問題，我們從全球幾個主流站點對它的青睞就可以看出。社交網絡大亨Facebook已經推出他們期待已久的基于HTML5的iPad應用平臺，潘多拉也推出他們基于HTML5的音樂播放器的新版本。游戲平臺Zynga也在推出了三款新的在移動設備瀏覽器上運行的基于HTML5的游戲等等。每天都有不斷的基于HTML5的網站和HTML5特性的網站被推出。保持站點處于新技術的前沿，也可以很好的提高用戶的友好體驗。

可用性的提高，提高用戶的友好體驗

HTML5的推出給前端行業帶來了一片新的天空，不單單提供了大量的API，給移動端開發也是一個很大的福音。

說了這么多，扯了這么多，那么上面這些和移動端又有什么關系。實質上是沒有關系的，在做移動端開發，由于移動端對于HTML5的支持還是很不錯的。推薦大家在做移動端開發的時候，盡量使用HTML5新添加的那些語義化的標簽。

HTML5在特別老的手機上會有問題，因為手機是無法識別這些新標簽的。所以我們需要使用JavaScript的createElement方法，手動創建標簽，以解決兼容問題，不做多余贅述，這不是本文的重點。

meta標簽

看到meta標簽，不禁的讓我想起一次面試經歷，面試官當時問了我一個問題里面都有什么？記得當時只是回答了都有哪些標簽，然而，面試官想要知道的不只是簡簡單單的幾個標簽。meta一個熟悉既陌生的標簽。它到底能做什么？

META標簽:通常所說的meta標簽，是在HTML網頁源代碼中一個重要的html標簽。META標簽用來描述一個HTML網頁文檔的屬性，例如作者、日期和時間、網頁描述、關鍵詞、頁面刷新等。

根據百度百科介紹，可以做很多事情的ing，有的時候SEO也是依賴于meta標簽。元數據是用來概括描述數據的一些基本數據。也就是描述數據的數據。

SEO

meta標簽共有兩個屬性，分別是http-equiv屬性和name屬性。meta標簽用來描述一個HTML網頁文檔的屬性，但卻是文檔的最基本的元數據

name

name屬性主要用于描述網頁，與之對應的屬性值為content，content中的內容主要是便于搜索引擎機器人查找信息和分類信息用的。

meta標簽的name屬性語法格式是：。

其中name屬性主要有以下幾種參數:

http-equiv

http-equiv顧名思義，相當于http協議中文件頭的作用，它可以向瀏覽器傳回一些有用的信息，以幫助正確和精確地顯示網頁內容，與之對應的屬性值為content，content中的內容其實就是各個參數的變量值。

meta標簽的一個很重要的功能就是設置關鍵字，來幫助你的主頁被各大搜索引擎登錄，提高網站的訪問量。在這個功能中，最重要的就是對Keywords和description的設置。因為按照搜索引擎的工作原理,搜索引擎首先派出機器人自動檢索頁面中的keywords和decription，并將其加入到自己的數據庫，然后再根據關鍵詞的密度將網站排序。

移動端輔助參數

HTML5推出之后又給meta賦予了新的使命。meta可以輔助對移動段適配提供一些參數，供瀏覽器使用。

//  標簽的 name 是：可視區域窗口
name = "viewport"
//  設置可視區內容的屬性
content
//  寬度等于設備的寬度；一般情況下 width 可以接受兩種參數(number||device-width)
//  由于 number [任意數值]在某些移動設備的兼容性不好，所以一般都會使用 device-width。
width="device-width"
//  頁面初始比例，配合縮放最大最小使用(number)
initial-scale = 1.0  
//  最小縮放比例，一般會和初始比例保持一致
minimum-scale = 1.0
//  最大縮放比例
maximum-scale = 1.0

//  示例

meta除了上述所說的以外還有一些其他輔助功能。

//  去除iphone識別數字為號碼

//  不識別郵箱

//  禁止跳轉至地圖

移動端設備像素比

說到像素比，那么到底什么是像素比呢？像素比是瀏覽器廠商出產時候對移動設備的設置，把一個像素放大至N個像素去顯示，這里的N=像素比。我們對像素比的屬性只能獲取，不能對其進行設置。

舉個栗子 ：
現在有個div，設置CSS屬性，假設當前設備獲取到的像素比為：2

那么設備上顯示元素的時候，元素中的1px按照2倍像素比顯示，即1px按照2px來顯示，也就是說元素被放大成200px*200px來顯示。

大家知道，一張正常的圖片在photoShop中進行放大的時候會失真變的模糊。那么在構建HTML頁面的時候，圖片會被放大到2倍的像素比來顯示，同理也會導致圖片會失真，為了避免在圖片在不同設備中顯示的時候避免圖片失真，在切圖過程中圖片一定要在寬度大于750px的設計圖上選擇圖片?；蛘吒鶕?b>dpi來修改圖標的大小，使用@2x或者@3x倍圖。

@mixin bg-image($url) {
    background-image: url($url + "@2x.png");
}

對于圖標的處理可以使用字體包的形式來處理。通過font-size來展示icon阿里圖標庫。對于字體包的應用這里就不做太多贅述了。

移動端常見樣式問題

在進行web端開發的時候很多元素都會有一些默認的屬性，給開發帶來很大的困擾，然而到了移動端這些問題就沒了嗎？答案是NO，反之移動端帶來的問題遠遠比web端要多很多。

灰色陰影

開發的過程中超鏈接，按鈕在按下的時候，在元素身上會出現灰色的陰影，閃爍一下。然而這樣會給用戶體驗帶來不好的影響，對于這個問題到底應該怎么解決？

解決方案：

a,input,button{
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
}

按鈕 IOS 下默認樣式

在開發的過程中按照設計圖給button編寫好css樣式，在PC端(移動端模擬器)進行測試的時候沒有任何異常，但是通過真機測試的時候就會發現自己寫的css樣式，被IOS的默認樣式給干掉了，和自己想的完全不一樣。

解決方案：

input[type="button"],
input[type="submit"],
input[type="reset"]{
    appearance: none;
    -webkit-appearance: none;
}

textarea{
    appearance: none;
    -webkit-appearance: none;
}

移動端默認字體

當我們接到一個移動端項目的時候，psd文件到手，發現很多的UI設計師都喜歡使用微軟雅黑作為中文字體進行設計，于是就毫不猶豫的在css默認樣式內寫入font-family:"微軟雅黑"，直至上線才發現字體根本就不是微軟雅黑字體，有些驚呆了有木有~~~

這里說一下各種不同系統的默認字體：

ios 系統

默認中文字體是 Heiti SC

默認英文字體是 Helvetica

默認數字字體是 HelveticaNeue

無微軟雅黑字體

android 系統

默認中文字體是 Droidsansfallback

默認英文和數字字體是 Droid Sans

無微軟雅黑字體

winphone 系統

默認中文字體是 Dengxian （方正等線體）

默認英文和數字字體是 Segoe

無微軟雅黑字體

以上就是各個系統默認引用的字體包，這里要和設計師說明。但是如果設計師非要堅持使用微軟雅黑字體怎么辦，難道就沒有辦法了么？答案是有的，Css3推出了加載本地字體包。但是不到玩不得以不推薦這樣做，因為一個中文字體包實在是太大了?？赡苄枰?b>10+M對于整個網頁來說可能需要長時間的加載，有些得不償失了。

@font-face {
    font-family: "lato";
    src: url(./font/Lato-Light.ttf);
}
@font-face {
    font-family: "webfontSourceHanSansSC";
    src: url(./font/SourceHanSansCN-Light.ttf);
}

文字縮放

在部分手機中橫豎屏切換的時候可能會導致字體大小縮放，用戶體驗很不好，使用如下css來禁止文字縮放問題。

*{
    -webkit-text-size-adjust:100%;
}

滾動回彈

overflow-scrolling屬性控制元素在移動設備上是否使用滾動回彈效果。auto使用普通滾動，當手指從觸摸屏上移開，滾動會立即停止。touch使用具有回彈效果的滾動，當手指從觸摸屏上移開，內容會繼續保持一段時間的滾動效果。繼續滾動的速度和持續的時間和滾動手勢的強烈程度成正比。

body{
    -webkit-overflow-scrolling:touch;
}

一定要設置該屬性，否則在IOS下會出現局部滾動不流暢的bug

自適應與響應式

很長一段時間對于自適應與響應式很模糊，傻傻分不清楚，都是為了適配移動端，難道兩個不是同一個東西么？兩者之間到底有什么區別呢？那么如果想要搞明白這個問題，我想先需要了解一下自適應和響應式到底是什么，才能弄明白兩者之間的區別。

為了搞清楚這個問題，瘋狂Google于是找到了這張圖，這張圖可以說是把自適應與響應式表現的淋漓盡致。

圖片選自網絡，侵權必刪

響應式

響應式網頁設計：響應式網站設計是一種網絡頁面設計布局，其理念是：集中創建頁面的圖片排版大小，可以智能地根據用戶行為以及使用的設備環境進行相對應的布局。(百度百科)

個人理解：響應式是web端頁面對移動設備的兼容處理。其實現全部依賴于@media(媒體查詢)。其作用就是實時的監控設備情況，完成不同的文件操作。@media可以針對不同的屏幕尺寸設置不同的樣式，特別是如果你需要設計響應式的頁面，@media是非常有用的。當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新對頁面進行渲染。

并不是所有瀏覽器都能很好的支持@media，以下@media在各個瀏覽器中支持情況。

瀏覽器支持

解決方案引入遠程cdn地址，對響應式進行兼容性處理。

媒體類型

設備類型形形色色，對于不同的設備該如何去選擇處理，@media不僅僅針對于移動設備，下面是@media支持的參數。

all ：所有設備

braille ：盲文觸覺設備

embossed ：盲文打印機

print ：手持設備

projection ：打印預覽

screen ：彩屏設備

speech ："聽覺"類似的媒體類型

tty ：不適用像素的設備

tv ：電視設備

@media print {
    #box {background:green;}
}

這樣在手持設備上這個div背景顏色就會變成綠色，在其他的設備上則還保持原有的粉色。So Easy有木有。然而并沒有這么簡單，想要完成響應式的操作還有大量的工作要去做。

設備屏幕的大小形形色色，大小不一應該以什么規格條件來完成適配呢？

適配條件：

PC端大屏 : 大于等于1200px

PC端中等屏 : 大于等于992px

中等屏（平板） : 大于等于768px

小屏（手機） : 小于768px

對于響應式總結起來也就是利用媒體查詢的特性，根據不同的屏幕的大小引入不同的css文件，以達到響應式的目的。

下面是我在使用響應式的時候總結的一些經驗：

不要使用固定的寬高

根據不同的屏幕引入不同的css文件

多使用一些浮動布局或彈性布局

盡量不要使用定位

圖片的處理，使圖片液態化

字體大小不要使用px，使用em后者rem（兩者區別前面章節有介紹）

自適應

自適應網頁設計：自適應網頁設計(AdaptiveWebDesign)指能使網頁自適應顯示在不同大小終端設備上新網頁設計方式及技術。

移動端的適配個說紛紜，如百分比適配，rem適配，vw適配然而這種情況給開發人員帶來很頭疼的問題，到底應該怎么適配才能響應不同的移動設備。其實，對于WebApp適配的解決方案有很多，在選擇上應該如何取舍，今天就這個問題我們來進行簡單的闡明。

如下所有示例都是使用同一布局：

    
1
    
2
    
3
    
4
    

百分比 || vw

因為所有的子元素都是的寬度百分比都是按照父級來定的，高度也是如此，如果把子元素寬度設置為100%的，高度不是固定的時候，子元素寬度會鋪滿整個父元素，里面的內容不統一的時候會出現參差不齊的情況。其中的原理就是，因為媒體查詢會實時對當前設備的可視窗口進行檢測，4 個div的寬度各占父層25%，就此完成適配。

#box {
    width:100%;
}
#box:after {
    content:"";
    display:block;
    clear:both;
}
#box div {
    width:25%;
    min-height:80px;
    float:left;
    font-size:36px;
    line-height:80px;
    text-align:center;
    color:white;
}
#box div:nth-child(1){
    background:red;
}
#box div:nth-child(2){
    background:blue;
}
#box div:nth-child(3){
    background:green;
}
#box div:nth-child(4){
    background:hotpink;
} 

使用vw也是如此，width:100vw=width:100%這個實在是有點無腦操作了，不在這里浪費大家太多時間。

利用viewport適配

其實大多數的Web App在開發的時候，利用百分比布局的比較少，也會帶來一些小的問題，這時就出現的利用viewport利用窗口的縮放來進行布局。

我們說過initial-scale(初始比例)，minimum-scale(最小縮放比例)，maximum-scale(最大縮放比例)，其實在移動在設置這個屬性的時候，并不是把元素給放大了，而是把屏幕按照設置的比例對應的放大，給用戶一種錯覺，達到頁面的放大縮小目的。那么該如何使用viewport進行適配呢？

改動CSS樣式:

#box {
    width:100%;
}
#box:after {
    content:"";
    display:block;
    clear:both;
}
#box div {
    width:80px;
    min-height:80px;
    float:left;
    font-size:36px;
    line-height:80px;
    text-align:center;
    color:white;
}
#box div:nth-child(1){
    background:red;
}
#box div:nth-child(2){
    background:blue;
}
#box div:nth-child(3){
    background:green;
}
#box div:nth-child(4){
    background:hotpink;
}

但是如果這樣設置的話就無法適應所有的移動設備了，我們應該怎么去做才能讓他完全的適配所有的移動設備呢？利用強大的JavaScript來解決這個問題，還沒有JavaScript不能解決的問題。

(function() {
    //獲取到的是移動設備的deviceWidth，即設備屏幕寬度
    var _deviceWidth = window.screen.width;     
    // 希望通過 viewport 把所有頁面設置成一致
    _targetWidth = 320;    
    //得到初始和最大最小縮放比例
    _scale = (_deviceWidth / _targetWidth);
    //創建一個meta標簽
    oMeta = document.createElement("meta");     
    oMeta.name = "viewport";     //可視區域窗口
    //把縮放比例賦值給初始化縮放比例最大最小縮放比例
    oMeta.content = "user-scalable=no,initial-scale=" + _scale +
                    ",minimum-scale=" + _scale +
                    ",maximum-scale=" + _scale;
    document.head.appendChild(oMeta);     //把meta標簽添加到head里面
})();

通過JavaScript把所有的目標屏幕寬度設置成一樣的，計算出當前的屏幕寬度與我們所需要設定的屏幕寬度的比例，達到設備的適配。通過viewport進行適配，會出現先前提到的問題，就是在圖片選取上要注意，圖片過小會導致圖的失真。

有一點需要注意，這種適配方法，在QQ內置瀏覽器中布局會錯亂，出現很大的適配問題，如果不考慮QQ內置瀏覽器的話可以考慮使用這種方案，但是不太推薦。

利用 rem 適配

然而最常見的適配方法也就是使用rem來進行適配，很多小伙伴可能對于em和rem有些混淆，傻傻的分不清楚。

em：是根據父節點的字體大小進行計算的單位。

rem： r 代表根（HTML），知道r代表HTML后就可以明確的知道rem是通過HTML的字體大小進行計算的單位。

(function() {
    //  獲取到HTML
    var oHtml = document.documentElement;   
    //  獲取到移動設備的html的外圍寬度，如果給HTML設置寬度會印象結果
    _hWidth = oHtml.getBoundingClientRect().width;    
    //  獲取到移動設備的視口的寬度，推薦使用
    _Width = oHtml.clientWidth;      
    //  這里的16是擬定值，可以隨意設置，最好能與你測試的設備寬度能整除，方便計算
    oHtml.style.fontSize = _Width / 16 + "px";     
})();

改動css

#box {
    width:100%;
}
#box:after {
    content:""; 
    display:block;
    clear:both;
}
#box div {
    width:4rem;
    height:4rem;
    float:left;
    font-size:36px;
    line-height:4rem;
    text-align:center;
    color:white;
}
#box div:nth-child(1){
    background:red;
}
#box div:nth-child(2){
    background:blue;
}
#box div:nth-child(3){
    background:green;
}
#box div:nth-child(4){
    background:hotpink;
}

既然已經知道兩者的區別，那么在實際開發過程中應該如何使用rem完成適配，上面的css代碼中，rem又是怎么計算得出來的呢？

公式：元素所需設置的rem值=設計圖測量的值/(屏幕的寬度/N)，這里的N就是在JavaScript計算的時候除以的那個16。其原理是把屏幕平均分成了N份，并把一份的值賦值給了rem，也就是html根元素的字體大小。

我也去看了一下如某寶、某東的適配方案，他們同樣使用的是rem進行適配的，但是與他們在rem賦值的做了判斷，當屏幕大于750px就將屏幕寬度鎖死，固定在750px使rem成為一個固定的值。這樣當屏幕過大的時候，頁面內容不會變的特別大。

(function() {
    //  獲取到HTML
    var oHtml = document.documentElement;   
    //  獲取到移動設備的html的外圍寬度，如果給HTML設置寬度會印象結果
    _hWidth = oHtml.getBoundingClientRect().width;    
    //  獲取到移動設備的視口的寬度，推薦使用
    _Width = oHtml.clientWidth;      
    _Width = _Width>=750?750:_Width;
    //  這里的16是擬定值，可以隨意設置，最好能與你測試的設備寬度能整除，方便計算
    oHtml.style.fontSize = _Width / 16 + "px";     
})();

很多大廠都是采用的rem的這種適配方案，大家可以自行Google一下，大廠是如何處理的。理論上是差不多的，可能就是在用法以及對于rem計算的處理有些不同而已。不管如何處理只要懂得這個道理就好了。

移動端事件

隨著設備的不同所要應用的事件也就會有所不同，然而在移動的應用onclick的時候是可以兼容的，會存在一些小問題，所以針對移動端，推出了移動端專用的事件，那么今天就具體和大家說一下，移動端的事件的一些問題，以及在解決這些問題的時候引發出的另一些問題。

現在會想起最初做移動端的時候，是使用onclick事件去完成一些操作，雖然移動端能夠完成onclick的一些操作，還是會存在一些問題。

Click事件在移動端開發中會有300ms的延遲，因為在移動端早期，瀏覽器系統有放大縮小功能，用戶在屏幕上點擊兩次以后，系統會觸發放大或者縮小的功能，因此系統做了一個處理，當觸摸一次后，在300ms以后有沒有進行二次觸摸，如果存在二次觸摸，說明就觸發了放大或縮小功能，否則的話只是單單執行click事件。因此當click時候，所有用戶必須等300ms后才會觸發click事件。所以當在移動端使用click事件的時候，會感覺有300ms的延遲。

移動端主要分為三個比較重要的事件，也是經常用的事件：

touchStart ：手指按下
touchMove ：手指移動
touchEnd ：手指離開

移動端事件對象

移動端的事件對象與web端中的事件對象有些不太一樣，web端我們在對頁面進行操作的時候大多數都是依賴于鼠標，但是移動端是依賴于屏幕的，通過手指的觸摸屏幕，給用戶反饋，鼠標只能有一個，但是手機卻又很多(●"?"●)

移動端的事件對象存在于事件函數中：
例子：

var oDiv = document.getElementById("div");
oDiv.addEventListener("touchstart",function(ev){
    console.log(ev)
})

事件對象屬性：

大家可以通過上面的代碼輸出一下ev（事件對象），在控制臺查看一下移動端都包含哪些東西。

除了上述事件，有個特殊事件再說一下orientationChange這個事件是蘋果公司為safari中添加的。以便開發人員能夠確定用戶何時將設備由橫向查看切換為縱向查看模式。在設備旋轉的時候，會觸發這個事件。

window.addEventListener("orientationchange", () => {
    alert(window.orientation);
}, false);

orientation media query在ios3.2+和安卓2.0+上還有其他瀏覽器上有效。有些設備并沒有提供orientationchange事件，但不觸發窗口的resize事件。并且media queries也不支持的情況下，我們該怎么辦呢？可以用resize事件來判斷。用innerWidth，innerHeight，可以檢索得到屏幕大小。依據寬和高的大小比較判斷，寬小于高為豎屏，寬大與高就是橫屏。就現在的移動端發展而言已經又大多數移動設備已經支持這個事件了。

移動端開發注意事項

在移動端開發的過程中，瀏覽器的模擬器有時可能會不支持on的方法綁定事件，所以一般要用事件綁定的方式給元素綁定事件。

var oDiv = document.getElementById("div");
oDiv.addEventListener("touchstart",(ev) => {
    console.log(ev)
})

移動端開發有一個很大的坑，層級為了這個坑也是翻山越嶺。這個大坑就是事件點透，最初看到這個名詞的時候也是一臉的懵逼，不知道怎么回事。

什么是事件點透？當上層元素發生點擊的時候，下層元素也有點擊特性，在大約300ms后，如果上層元素消失或者隱藏，目標點會“漂移”到下層元素身上，觸發點擊事件。

解決方法：

下層不要使用有點擊（焦點）特性的元素。

阻止document的默認行為

總結

寫了好多東西，只是個人的一些對于移動端開發的一些總結，可能寫的有些亂，很感謝大家能夠花費這么長時間來閱讀這篇文章。文章中哪里有錯誤的話，大家可以在下面給我留言，我會盡快做出改正。

如果你和我一樣喜歡前端的話，可以加Qq群：135170291，期待大家的加入。