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

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

HTML5與SEO

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

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

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

提供更多的功能，提高用戶的友好體驗(yàn)

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

可用性的提高，提高用戶的友好體驗(yàn)

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

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

HTML5在特別老的手機(jī)上會有問題，因?yàn)槭謾C(jī)是無法識別這些新標(biāo)簽的。所以我們需要使用JavaScript的createElement方法，手動創(chuàng)建標(biāo)簽，以解決兼容問題，不做多余贅述，這不是本文的重點(diǎn)。

meta標(biāo)簽

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

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

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

SEO

meta標(biāo)簽共有兩個屬性，分別是http-equiv屬性和name屬性。meta標(biāo)簽用來描述一個HTML網(wǎng)頁文檔的屬性，但卻是文檔的最基本的元數(shù)據(jù)

name

name屬性主要用于描述網(wǎng)頁，與之對應(yīng)的屬性值為content，content中的內(nèi)容主要是便于搜索引擎機(jī)器人查找信息和分類信息用的。

meta標(biāo)簽的name屬性語法格式是：。

其中name屬性主要有以下幾種參數(shù):

http-equiv

http-equiv顧名思義，相當(dāng)于http協(xié)議中文件頭的作用，它可以向?yàn)g覽器傳回一些有用的信息，以幫助正確和精確地顯示網(wǎng)頁內(nèi)容，與之對應(yīng)的屬性值為content，content中的內(nèi)容其實(shí)就是各個參數(shù)的變量值。

meta標(biāo)簽的一個很重要的功能就是設(shè)置關(guān)鍵字，來幫助你的主頁被各大搜索引擎登錄，提高網(wǎng)站的訪問量。在這個功能中，最重要的就是對Keywords和description的設(shè)置。因?yàn)榘凑账阉饕娴墓ぷ髟?搜索引擎首先派出機(jī)器人自動檢索頁面中的keywords和decription，并將其加入到自己的數(shù)據(jù)庫，然后再根據(jù)關(guān)鍵詞的密度將網(wǎng)站排序。

移動端輔助參數(shù)

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

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

//  示例

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

//  去除iphone識別數(shù)字為號碼

//  不識別郵箱

//  禁止跳轉(zhuǎn)至地圖

移動端設(shè)備像素比

說到像素比，那么到底什么是像素比呢？像素比是瀏覽器廠商出產(chǎn)時候?qū)σ苿釉O(shè)備的設(shè)置，把一個像素放大至N個像素去顯示，這里的N=像素比。我們對像素比的屬性只能獲取，不能對其進(jìn)行設(shè)置。

舉個栗子 ：
現(xiàn)在有個div，設(shè)置CSS屬性，假設(shè)當(dāng)前設(shè)備獲取到的像素比為：2

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

大家知道，一張正常的圖片在photoShop中進(jìn)行放大的時候會失真變的模糊。那么在構(gòu)建HTML頁面的時候，圖片會被放大到2倍的像素比來顯示，同理也會導(dǎo)致圖片會失真，為了避免在圖片在不同設(shè)備中顯示的時候避免圖片失真，在切圖過程中圖片一定要在寬度大于750px的設(shè)計圖上選擇圖片。或者根據(jù)dpi來修改圖標(biāo)的大小，使用@2x或者@3x倍圖。

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

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

移動端常見樣式問題

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

灰色陰影

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

解決方案：

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

按鈕 IOS 下默認(rèn)樣式

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

解決方案：

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

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

移動端默認(rèn)字體

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

這里說一下各種不同系統(tǒng)的默認(rèn)字體：

ios 系統(tǒng)

默認(rèn)中文字體是 Heiti SC

默認(rèn)英文字體是 Helvetica

默認(rèn)數(shù)字字體是 HelveticaNeue

無微軟雅黑字體

android 系統(tǒng)

默認(rèn)中文字體是 Droidsansfallback

默認(rèn)英文和數(shù)字字體是 Droid Sans

無微軟雅黑字體

winphone 系統(tǒng)

默認(rèn)中文字體是 Dengxian （方正等線體）

默認(rèn)英文和數(shù)字字體是 Segoe

無微軟雅黑字體

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

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

文字縮放

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

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

滾動回彈

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

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

一定要設(shè)置該屬性，否則在IOS下會出現(xiàn)局部滾動不流暢的bug

自適應(yīng)與響應(yīng)式

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

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

圖片選自網(wǎng)絡(luò)，侵權(quán)必刪

響應(yīng)式

響應(yīng)式網(wǎng)頁設(shè)計：響應(yīng)式網(wǎng)站設(shè)計是一種網(wǎng)絡(luò)頁面設(shè)計布局，其理念是：集中創(chuàng)建頁面的圖片排版大小，可以智能地根據(jù)用戶行為以及使用的設(shè)備環(huán)境進(jìn)行相對應(yīng)的布局。(百度百科)

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

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

瀏覽器支持

解決方案引入遠(yuǎn)程cdn地址，對響應(yīng)式進(jìn)行兼容性處理。

媒體類型

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

all ：所有設(shè)備

braille ：盲文觸覺設(shè)備

embossed ：盲文打印機(jī)

print ：手持設(shè)備

projection ：打印預(yù)覽

screen ：彩屏設(shè)備

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

tty ：不適用像素的設(shè)備

tv ：電視設(shè)備

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

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

設(shè)備屏幕的大小形形色色，大小不一應(yīng)該以什么規(guī)格條件來完成適配呢？

適配條件：

PC端大屏 : 大于等于1200px

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

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

小屏（手機(jī)） : 小于768px

對于響應(yīng)式總結(jié)起來也就是利用媒體查詢的特性，根據(jù)不同的屏幕的大小引入不同的css文件，以達(dá)到響應(yīng)式的目的。

下面是我在使用響應(yīng)式的時候總結(jié)的一些經(jīng)驗(yàn)：

不要使用固定的寬高

根據(jù)不同的屏幕引入不同的css文件

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

盡量不要使用定位

圖片的處理，使圖片液態(tài)化

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

自適應(yīng)

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

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

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

    
1
    
2
    
3
    
4
    

百分比 || vw

因?yàn)樗械淖釉囟际堑膶挾劝俜直榷际前凑崭讣墎矶ǖ?，高度也是如此，如果把子元素寬度設(shè)置為100%的，高度不是固定的時候，子元素寬度會鋪滿整個父元素，里面的內(nèi)容不統(tǒng)一的時候會出現(xiàn)參差不齊的情況。其中的原理就是，因?yàn)槊襟w查詢會實(shí)時對當(dāng)前設(shè)備的可視窗口進(jìn)行檢測，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%這個實(shí)在是有點(diǎn)無腦操作了，不在這里浪費(fèi)大家太多時間。

利用viewport適配

其實(shí)大多數(shù)的Web App在開發(fā)的時候，利用百分比布局的比較少，也會帶來一些小的問題，這時就出現(xiàn)的利用viewport利用窗口的縮放來進(jìn)行布局。

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

改動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;
}

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

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

通過JavaScript把所有的目標(biāo)屏幕寬度設(shè)置成一樣的，計算出當(dāng)前的屏幕寬度與我們所需要設(shè)定的屏幕寬度的比例，達(dá)到設(shè)備的適配。通過viewport進(jìn)行適配，會出現(xiàn)先前提到的問題，就是在圖片選取上要注意，圖片過小會導(dǎo)致圖的失真。

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

利用 rem 適配

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

em：是根據(jù)父節(jié)點(diǎn)的字體大小進(jìn)行計算的單位。

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

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

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

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

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

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

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

移動端事件

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

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

Click事件在移動端開發(fā)中會有300ms的延遲，因?yàn)樵谝苿佣嗽缙?，瀏覽器系統(tǒng)有放大縮小功能，用戶在屏幕上點(diǎn)擊兩次以后，系統(tǒng)會觸發(fā)放大或者縮小的功能，因此系統(tǒng)做了一個處理，當(dāng)觸摸一次后，在300ms以后有沒有進(jìn)行二次觸摸，如果存在二次觸摸，說明就觸發(fā)了放大或縮小功能，否則的話只是單單執(zhí)行click事件。因此當(dāng)click時候，所有用戶必須等300ms后才會觸發(fā)click事件。所以當(dāng)在移動端使用click事件的時候，會感覺有300ms的延遲。

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

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

移動端事件對象

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

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

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

事件對象屬性：

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

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

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

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

移動端開發(fā)注意事項(xiàng)

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

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

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

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

解決方法：

下層不要使用有點(diǎn)擊（焦點(diǎn)）特性的元素。

阻止document的默認(rèn)行為

總結(jié)

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

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