資訊專欄INFORMATION COLUMN
摘要：標簽相關能優化移動瀏覽器的顯示。會導致添加到主屏后以全屏模式打開頁面時出現黑邊如果不是響應式網站，不要使用或者禁用縮放。這一對事件可以用來檢測元素上的單擊和雙擊。
meta標簽相關 viewport：能優化移動瀏覽器的顯示。
如果不是響應式網站，不要使用initial-scale或者禁用縮放。
適配 iPhone 6 和 iPhone 6plus 則需要寫：
大部分 4.7~5 寸的安卓設備的 viewport寬設為 360px，iPhone 6 上卻是 375px，大部分 5.5 寸安卓機器（比如說三星 Note）的 viewport寬為 400，iPhone 6 plus 上是 414px。
width：寬度（數值 / device-width）（范圍從200 到10,000，默認為980 像素）
height：高度（數值 / device-height）（范圍從223 到10,000）
initial-scale：初始的縮放比例 （范圍從>0 到10）
minimum-scale：允許用戶縮放到的最小比例
maximum-scale：允許用戶縮放到的最大比例
user-scalable：用戶是否可以手動縮 (no,yes)
minimal-ui：可以在頁面加載時最小化上下狀態欄。（已棄用）
注意，很多人使用initial-scale=1到非響應式網站上，這會讓網站以100%寬度渲染，用戶需要手動移動頁面或者縮放。如果和initial-scale=1同時使用user-scalable=no或maximum-scale=1，則用戶將不能放大/縮小網頁來看到全部的內容。
移動端的meta
移動端事件 zepto封裝的手勢事件
tap —元素tap的時候觸發。
singleTap and doubleTap — 這一對事件可以用來檢測元素上的單擊和雙擊。(如果你不需要檢測單擊、雙擊，使用 tap 代替)。
longTap — 當一個元素被按住超過750ms觸發。
swipe, swipeLeft, swipeRight, swipeUp, swipeDown — 當元素被劃過時觸發。(可選擇給定的方向)
手機瀏覽器常用手勢動作監聽封裝現今大多數觸屏手機webkit內核提供了touch事件的監聽，讓開發者可以獲取用戶觸摸屏幕時的一些信息。
其中包括：touchstart,touchmove,touchend,touchcancel 這四個事件
touchstart,touchmove,touchend事件可以類比于mousedown，mouseover ，mouseup的觸發
而touchcancel許多人不知道它在什么時候會被觸發而忽略它，其實當你的手指還沒有離開屏幕時，有系統級的操作發生時就會觸發touchcancel，例如alert和confirm彈框，又或者是android系統的功能彈窗
這4個事件的觸發順序為：
touchstart -> touchmove -> …… -> touchmove ->touchend
點擊穿透bug 點擊穿透場景及原因我們經常會看到“彈窗/浮層”這種東西，整個容器里有一個底層元素的div，和一個彈出層div，為了讓彈出層有模態框的效果，我又加了一個遮罩層.然后為底層元素綁定 click 事件，而彈出層的關閉按鈕綁定 tap 事件。
點擊關閉按鈕，touchend首先觸發tap，彈出層和遮罩就被隱藏了。touchend后繼續等待300ms發現沒有其他行為了，則繼續觸發click，由于這時彈出層已經消失，所以當前click事件的target就在底層元素上，于是就alert內容。整個事件觸發過程為 touchend -> tap -> click。
而由于click事件的滯后性（300ms），在這300ms內上層元素隱藏或消失了，下層同樣位置的DOM元素觸發了click事件（如果是input框則會觸發focus事件），看起來就像點擊的target“穿透”到下層去了。
因此，點擊穿透的現象就容易理解了，在這 300ms 以內，因為上層元素隱藏或消失了，由于 click 事件的滯后性，同樣位置的 DOM 元素觸發了 click 事件（如果是 input 則觸發了 focus 事件）。在代碼中，給我們的感覺就是 target 發生了飄移。
通用解決方案：采取fastclick
離線緩存
css優化【3d動畫優化】
js優化 【js worker】
spdy,http2
service worker
入口dns預解析
域名收斂
cookie壓縮
網速及網絡情況偵測
webp
前端資源壓縮去重
首屏前置與資源lazyload
頁面模板與數據分離
適當的base64,首屏css不建議使用
script 異步
后臺智能加載下一頁
圖片漸進顯示
HTML head 頭標簽
點擊穿透原理及解決
各位前端er（或所在的前端團隊）在項目中都是怎么處理移動端的點擊事件的？
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80529.html
摘要：游戲開發實戰主要講解使用來開發和設計各類常見游戲的思路和技巧，在介紹相關特性的同時，還通過游戲開發實例深入剖析了其內在原理，讓讀者不僅知其然，而且知其所以然。HTML5 Canvas游戲開發實戰主要講解使用HTML5 Canvas來開發和設計各類常見游戲的思路和技巧，在介紹HTML5 Canvas相關特性的同時，還通過游戲開發實例深入剖析了其內在原理，讓讀者不僅知其然，而且知其所以然。在本書...
摘要：背景個人背景就讀于東北某普通二本院校計算機軟件工程專業，現大四，北京實習前端方向，自學，技術棧時間背景大概是在月日準備好簡歷開始投遞秋招差不多已經結束招聘崗位不多，投遞對象為大一些的互聯網公司事件背景第一個入職的是好未來的前端實習崗，待遇工 背景 個人背景 就讀于東北某普通二本院校計算機軟件工程專業，現大四，北京實習 前端方向，自學，vue技術棧 時間背景 大概是在11月9日準備...
摘要：背景個人背景就讀于東北某普通二本院校計算機軟件工程專業，現大四，北京實習前端方向，自學，技術棧時間背景大概是在月日準備好簡歷開始投遞秋招差不多已經結束招聘崗位不多，投遞對象為大一些的互聯網公司事件背景第一個入職的是好未來的前端實習崗，待遇工 背景 個人背景 就讀于東北某普通二本院校計算機軟件工程專業，現大四，北京實習 前端方向，自學，vue技術棧 時間背景 大概是在11月9日準備...
摘要：目錄移動端開發的基本觀點像素基礎知識原理解析彈性布局響應式設計的運用移動端的事件庫的使用移動端開發的基本觀點移動端開發的意義移動端用戶使用量市場需求市場供給公司需要移動端開發人才工資高，就業易涌現大波程序猿到了猴年馬月，工資才會 目錄 移動端開發的基本觀點 像素基礎知識 viewport原理解析 彈性布局 響應式設計 1rem的運用 移動端的事件 zepto庫的使用 移動端開發的...
摘要：目錄移動端開發的基本觀點像素基礎知識原理解析彈性布局響應式設計的運用移動端的事件庫的使用移動端開發的基本觀點移動端開發的意義移動端用戶使用量市場需求市場供給公司需要移動端開發人才工資高，就業易涌現大波程序猿到了猴年馬月，工資才會 目錄 移動端開發的基本觀點 像素基礎知識 viewport原理解析 彈性布局 響應式設計 1rem的運用 移動端的事件 zepto庫的使用 移動端開發的...
閱讀 3403·2023-04-26 02:41
閱讀 2445·2023-04-26 00:14
閱讀 2823·2021-08-11 10:22
閱讀 1275·2019-12-27 11:38
閱讀 3571·2019-08-29 18:34
閱讀 2375·2019-08-29 12:13
閱讀 2951·2019-08-26 18:26
閱讀 1834·2019-08-26 16:49
