成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

移動(dòng)端開發(fā)知識(shí)小結(jié)

Freeman / 2441人閱讀

摘要：標(biāo)簽相關(guān)能優(yōu)化移動(dòng)瀏覽器的顯示。會(huì)導(dǎo)致添加到主屏后以全屏模式打開頁(yè)面時(shí)出現(xiàn)黑邊如果不是響應(yīng)式網(wǎng)站，不要使用或者禁用縮放。這一對(duì)事件可以用來(lái)檢測(cè)元素上的單擊和雙擊。

meta標(biāo)簽相關(guān) viewport：能優(yōu)化移動(dòng)瀏覽器的顯示。

如果不是響應(yīng)式網(wǎng)站，不要使用initial-scale或者禁用縮放。
適配 iPhone 6 和 iPhone 6plus 則需要寫：

大部分 4.7~5 寸的安卓設(shè)備的 viewport寬設(shè)為 360px，iPhone 6 上卻是 375px，大部分 5.5 寸安卓機(jī)器（比如說(shuō)三星 Note）的 viewport寬為 400，iPhone 6 plus 上是 414px。

width：寬度（數(shù)值 / device-width）（范圍從200 到10,000，默認(rèn)為980 像素）
height：高度（數(shù)值 / device-height）（范圍從223 到10,000）
initial-scale：初始的縮放比例 （范圍從>0 到10）
minimum-scale：允許用戶縮放到的最小比例
maximum-scale：允許用戶縮放到的最大比例
user-scalable：用戶是否可以手動(dòng)縮 (no,yes)
minimal-ui：可以在頁(yè)面加載時(shí)最小化上下狀態(tài)欄。（已棄用）
注意，很多人使用initial-scale=1到非響應(yīng)式網(wǎng)站上，這會(huì)讓網(wǎng)站以100%寬度渲染，用戶需要手動(dòng)移動(dòng)頁(yè)面或者縮放。如果和initial-scale=1同時(shí)使用user-scalable=no或maximum-scale=1，則用戶將不能放大/縮小網(wǎng)頁(yè)來(lái)看到全部的內(nèi)容。

WebApp全屏模式：偽裝app，離線應(yīng)用。
移動(dòng)端的meta
移動(dòng)端事件 zepto封裝的手勢(shì)事件

tap —元素tap的時(shí)候觸發(fā)。

singleTap and doubleTap — 這一對(duì)事件可以用來(lái)檢測(cè)元素上的單擊和雙擊。(如果你不需要檢測(cè)單擊、雙擊，使用 tap 代替)。

longTap — 當(dāng)一個(gè)元素被按住超過750ms觸發(fā)。

swipe, swipeLeft, swipeRight, swipeUp, swipeDown — 當(dāng)元素被劃過時(shí)觸發(fā)。(可選擇給定的方向)

手機(jī)瀏覽器常用手勢(shì)動(dòng)作監(jiān)聽封裝

現(xiàn)今大多數(shù)觸屏手機(jī)webkit內(nèi)核提供了touch事件的監(jiān)聽，讓開發(fā)者可以獲取用戶觸摸屏幕時(shí)的一些信息。

其中包括：touchstart,touchmove,touchend,touchcancel 這四個(gè)事件

touchstart,touchmove,touchend事件可以類比于mousedown，mouseover ，mouseup的觸發(fā)

而touchcancel許多人不知道它在什么時(shí)候會(huì)被觸發(fā)而忽略它，其實(shí)當(dāng)你的手指還沒有離開屏幕時(shí)，有系統(tǒng)級(jí)的操作發(fā)生時(shí)就會(huì)觸發(fā)touchcancel，例如alert和confirm彈框，又或者是android系統(tǒng)的功能彈窗
這4個(gè)事件的觸發(fā)順序?yàn)椋?/p>

touchstart -> touchmove -> …… -> touchmove ->touchend

點(diǎn)擊穿透bug 點(diǎn)擊穿透場(chǎng)景及原因

我們經(jīng)常會(huì)看到“彈窗/浮層”這種東西，整個(gè)容器里有一個(gè)底層元素的div，和一個(gè)彈出層div，為了讓彈出層有模態(tài)框的效果，我又加了一個(gè)遮罩層.然后為底層元素綁定 click 事件，而彈出層的關(guān)閉按鈕綁定 tap 事件。
點(diǎn)擊關(guān)閉按鈕，touchend首先觸發(fā)tap，彈出層和遮罩就被隱藏了。touchend后繼續(xù)等待300ms發(fā)現(xiàn)沒有其他行為了，則繼續(xù)觸發(fā)click，由于這時(shí)彈出層已經(jīng)消失，所以當(dāng)前click事件的target就在底層元素上，于是就alert內(nèi)容。整個(gè)事件觸發(fā)過程為 touchend -> tap -> click。

　　而由于click事件的滯后性（300ms），在這300ms內(nèi)上層元素隱藏或消失了，下層同樣位置的DOM元素觸發(fā)了click事件（如果是input框則會(huì)觸發(fā)focus事件），看起來(lái)就像點(diǎn)擊的target“穿透”到下層去了。
因此，點(diǎn)擊穿透的現(xiàn)象就容易理解了，在這 300ms 以內(nèi)，因?yàn)樯蠈釉仉[藏或消失了，由于 click 事件的滯后性，同樣位置的 DOM 元素觸發(fā)了 click 事件（如果是 input 則觸發(fā)了 focus 事件）。在代碼中，給我們的感覺就是 target 發(fā)生了飄移。
通用解決方案：采取fastclick

性能優(yōu)化 技術(shù)相關(guān)

離線緩存
css優(yōu)化【3d動(dòng)畫優(yōu)化】
js優(yōu)化 【js worker】
spdy,http2
service worker
入口dns預(yù)解析
域名收斂
cookie壓縮
網(wǎng)速及網(wǎng)絡(luò)情況偵測(cè)
webp

策略相關(guān)

前端資源壓縮去重
首屏前置與資源lazyload
頁(yè)面模板與數(shù)據(jù)分離
適當(dāng)?shù)腷ase64,首屏css不建議使用
script 異步
后臺(tái)智能加載下一頁(yè)
圖片漸進(jìn)顯示

參考資料

HTML head 頭標(biāo)簽
點(diǎn)擊穿透原理及解決
各位前端er（或所在的前端團(tuán)隊(duì)）在項(xiàng)目中都是怎么處理移動(dòng)端的點(diǎn)擊事件的？

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/80529.html

相關(guān)文章

  • HTML5 Canvas游戲開發(fā)實(shí)戰(zhàn) PDF掃描版

    摘要：游戲開發(fā)實(shí)戰(zhàn)主要講解使用來(lái)開發(fā)和設(shè)計(jì)各類常見游戲的思路和技巧，在介紹相關(guān)特性的同時(shí)，還通過游戲開發(fā)實(shí)例深入剖析了其內(nèi)在原理，讓讀者不僅知其然，而且知其所以然。HTML5 Canvas游戲開發(fā)實(shí)戰(zhàn)主要講解使用HTML5 Canvas來(lái)開發(fā)和設(shè)計(jì)各類常見游戲的思路和技巧，在介紹HTML5 Canvas相關(guān)特性的同時(shí)，還通過游戲開發(fā)實(shí)例深入剖析了其內(nèi)在原理，讓讀者不僅知其然，而且知其所以然。在本書...

    cocopeak 評(píng)論0 收藏0

  • 2018.11.19秋招末第二波前端實(shí)習(xí)/校招小結(jié)

    摘要：背景個(gè)人背景就讀于東北某普通二本院校計(jì)算機(jī)軟件工程專業(yè)，現(xiàn)大四，北京實(shí)習(xí)前端方向，自學(xué)，技術(shù)棧時(shí)間背景大概是在月日準(zhǔn)備好簡(jiǎn)歷開始投遞秋招差不多已經(jīng)結(jié)束招聘崗位不多，投遞對(duì)象為大一些的互聯(lián)網(wǎng)公司事件背景第一個(gè)入職的是好未來(lái)的前端實(shí)習(xí)崗，待遇工 背景 個(gè)人背景 就讀于東北某普通二本院校計(jì)算機(jī)軟件工程專業(yè)，現(xiàn)大四，北京實(shí)習(xí) 前端方向，自學(xué)，vue技術(shù)棧 時(shí)間背景 大概是在11月9日準(zhǔn)備...

    suxier 評(píng)論0 收藏0

  • 2018.11.19秋招末第二波前端實(shí)習(xí)/校招小結(jié)

    摘要：背景個(gè)人背景就讀于東北某普通二本院校計(jì)算機(jī)軟件工程專業(yè)，現(xiàn)大四，北京實(shí)習(xí)前端方向，自學(xué)，技術(shù)棧時(shí)間背景大概是在月日準(zhǔn)備好簡(jiǎn)歷開始投遞秋招差不多已經(jīng)結(jié)束招聘崗位不多，投遞對(duì)象為大一些的互聯(lián)網(wǎng)公司事件背景第一個(gè)入職的是好未來(lái)的前端實(shí)習(xí)崗，待遇工 背景 個(gè)人背景 就讀于東北某普通二本院校計(jì)算機(jī)軟件工程專業(yè)，現(xiàn)大四，北京實(shí)習(xí) 前端方向，自學(xué)，vue技術(shù)棧 時(shí)間背景 大概是在11月9日準(zhǔn)備...

    canger 評(píng)論0 收藏0

  • 移動(dòng)端開發(fā)系列——像素與viewport

    摘要：目錄移動(dòng)端開發(fā)的基本觀點(diǎn)像素基礎(chǔ)知識(shí)原理解析彈性布局響應(yīng)式設(shè)計(jì)的運(yùn)用移動(dòng)端的事件庫(kù)的使用移動(dòng)端開發(fā)的基本觀點(diǎn)移動(dòng)端開發(fā)的意義移動(dòng)端用戶使用量市場(chǎng)需求市場(chǎng)供給公司需要移動(dòng)端開發(fā)人才工資高，就業(yè)易涌現(xiàn)大波程序猿到了猴年馬月，工資才會(huì) 目錄 移動(dòng)端開發(fā)的基本觀點(diǎn) 像素基礎(chǔ)知識(shí) viewport原理解析 彈性布局 響應(yīng)式設(shè)計(jì) 1rem的運(yùn)用 移動(dòng)端的事件 zepto庫(kù)的使用 移動(dòng)端開發(fā)的...

    JayChen 評(píng)論0 收藏0

  • 移動(dòng)端開發(fā)系列——像素與viewport

    摘要：目錄移動(dòng)端開發(fā)的基本觀點(diǎn)像素基礎(chǔ)知識(shí)原理解析彈性布局響應(yīng)式設(shè)計(jì)的運(yùn)用移動(dòng)端的事件庫(kù)的使用移動(dòng)端開發(fā)的基本觀點(diǎn)移動(dòng)端開發(fā)的意義移動(dòng)端用戶使用量市場(chǎng)需求市場(chǎng)供給公司需要移動(dòng)端開發(fā)人才工資高，就業(yè)易涌現(xiàn)大波程序猿到了猴年馬月，工資才會(huì) 目錄 移動(dòng)端開發(fā)的基本觀點(diǎn) 像素基礎(chǔ)知識(shí) viewport原理解析 彈性布局 響應(yīng)式設(shè)計(jì) 1rem的運(yùn)用 移動(dòng)端的事件 zepto庫(kù)的使用 移動(dòng)端開發(fā)的...

    lingdududu 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

Freeman

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<