移動Web深度剖析

隨着前端技術的急速發展，隨着互聯網行業的日益發展，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標籤，不禁的讓我想起一次面試經歷，面試官當時問了我一個問題<head>裏面都有什麼？記得當時只是回答了都有哪些標籤，然而，面試官想要知道的不只是簡簡單單的幾個標籤。meta一個熟悉既陌生的標籤。它到底能做什麼？

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

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

SEO

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

name

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

meta標籤的name屬性語法格式是：<meta name="參數" content="具體的參數值" />。

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

名稱	作用	舉例
Keywords(關鍵字)	keywords用來告訴搜索引擎你網頁的關鍵字	<meta name ="keywords" content="science,human">
description(網站內容描述)	description用來告訴搜索引擎你的網站主要內容	<meta name="description" content="this's Aaron blog!">
author(作者)	標註網頁的作者	<meta name="author" content"root,[email protected]">
generator(頁面生成器)	規定用於生成文檔的一個軟件包（不用於手寫頁面）	<meta name="generator" content="FrontPage 4.0">
revised(頁面修改信息)	這常用於最後更改的網站	<meta name="revised" content="story,2015/07/22" />
copyright(版權信息)	版權信息	<meta name="copyright" content="All Rights Reserved" />

http-equiv

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

名稱	作用	舉例
content-Type(顯示字符集的設定)	設定頁面使用的字符集	<meta http-equiv="content-Type" content="text/html; charset=gb2312"/>
Expires(期限)	可以用於設定網頁的到期時間。一旦網頁過期，必須到服務器上重新傳輸，這裏必須使用GMT的時間格式	<meta http-equiv="expires" content="Fri, 12 Jan 2001 18:18:18 GMT">
Pragma(cache模式)	禁止瀏覽器從本地計算機的緩存中訪問頁面內容	<meta http-equiv="Pragma" content="no-cache"/>
Refresh(刷新)	自動刷新並指向新頁面，其中的2是指停留2秒鐘後自動刷新到URL網址	<meta http-equiv="Refresh" content="2; URL=http://www.root.net"/>
Set-Cookie(cookie設定)	設置`cookie`, 如果網頁過期，那麼存盤的`cookie`將被刪除	<meta http-equiv="Set-Cookie" content="cookievalue=xxx; expires=Friday, 12-Jan-2001 18:18:18 GMT; path=/";/>
Window-target(顯示窗口的設定)	強制頁面在當前窗口以獨立頁面顯示,用來防止別人在框架裏調用自己的頁面	<meta http-equiv="Window-target" content="_top"/>

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 name="viewport"
      content="width=device-width,
               initial-scale=1,
               minimum-scale=1,
               maximum-scale=1,
               user-scalable=no" />

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

//  去除iphone識別數字爲號碼
<meta name="format-detection" content="telephone=no">
//  不識別郵箱
<meta name="format-detection" content="email=no">
//  禁止跳轉至地圖
<meta name="format-detection" content="adress=no">

移動端設備像素比

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

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

<div id="box"></div>

<style type="text/css">
#box{
    width:100px;
    height:100px;
    background:red;  
}
</style>

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

大家知道，一張正常的圖片在photoShop中進行放大的時候會失真變的模糊。那麼在構建HTML頁面的時候，圖片會被放大到2倍的像素比來顯示，同理也會導致圖片會失真，爲了避免在圖片在不同設備中顯示的時候避免圖片失真，在切圖過程中圖片一定要在寬度大於750px的設計圖上選擇圖片。或者根據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推出了加載本地字體包。但是不到玩不得以不推薦這樣做，因爲一箇中文字體包實在是太大了。可能需要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在各個瀏覽器中支持情況。

瀏覽器支持

瀏覽器	版本
Chrome	21.0.0 版本以上
IE	9.0版本以上
Firefox	3.5.0版本以上
Safari	4.0.0版本以上
Opera	9.0.0版本以上

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

<script src="//cdn.bootcss.com/html5media/1.1.8/html5media.min.js"></script>

媒體類型

設備類型形形色色，對於不同的設備該如何去選擇處理，@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適配的解決方案有很多，在選擇上應該如何取捨，今天就這個問題我們來進行簡單的闡明。

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

<div id="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>    
</div>

百分比 || 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)
})

事件對象屬性：

屬性	說名
touches	當前位於屏幕上的所有手指的一個列表
targetTouches	位於當前DOM元素上的一個手指的一個列表
changedTouches	涉及當前事件的手指的一個列表

大家可以通過上面的代碼輸出一下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，期待大家的加入。

移動Web深度剖析

HTML5與SEO

meta標籤

移動端設備像素比

移動端常見樣式問題

自適應與響應式

移動端事件

總結

Nginx R31 doc 官方文檔-01-nginx 如何安裝

Qt/C++音視頻開發74-合併標籤圖形/生成yolo運算結果圖形/文字和圖形合併成一個/水印濾鏡

挑戰程序設計競賽 2.2章習題 POJ - 3617 Best Cow Line 貪心

字節面試：MySQL什麼時候鎖表？如何防止鎖表？

.NET8連接SQL SERVER 2008 R2 報：證書鏈是由不受信任的頒發機構頒發的

golang開發環境搭建(win10)

python計算機視覺學習筆記——PIL庫的用法

SpringCloud Gateway 動態路由

SpringCloud Gateway 路由數量對性能的影響研究

SpringCloud Gateway 路由轉發性能優化

Node.js事件循環

TypeScript基礎以及在Vue中的應用

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結