1. 程式人生 > >移動端的總結(一)

移動端的總結(一)



// 一.click的300ms的延遲相應 // 原理是click的300ms延遲是由於雙擊縮放所導致的,由於使用者可以通過進行雙擊縮放或者雙擊滾動的操作 // 當用戶一次點選螢幕之後,瀏覽器並不能立刻判斷使用者是確實要開啟這個連結,還是想要進行雙擊操作。因此, 移動端瀏覽器就等待300毫秒,以判斷使用者是否再次點選了螢幕。 // 解決辦法:FastClick專門為解決這個問題而開發的庫。在檢測到touchend事件的時候會通過DOM自定義事件 立即觸發一個模擬的click事件,並把瀏覽器在300毫秒之後真正觸發的click事件阻止掉。
// 程式碼的實現 function fastClick(){ window. addEventListener( "load", function(){ FastClick. attach(document.body); }, false);

}

二.

// 快速的回彈滾動 // 如果想要為某個元素擁有Native般的滾動效果,可以進行下面的操作 // .element { // overflow:auto;
// } // -webkit-overflow-scrolling:touch; // 除了以上的方法外我們通過使用swiper滾動 外掛,支援3D和內建的滾動條等。

三.

// 裝置的檢測 function checkDeviceType(){ var WIN = window; var LOC =WIN[ "location"]; var
NA = WIN.navigator; var UA = NA.userAgent. toLowerCase(); function test( needle){ return needle. test(UA); } var IsTouch = "ontouchend" in WIN; var IsAndroid = test( /android | htc/) || /linux/ i. test(NA.platform + ''); if(IsAndroid == true){ console. log( "裝置是安卓"); } var IsIPad = !IsAndroid && test( /ipad/); if(IsIPad == true){ console. log( "裝置是IPad"); } var IsIPhone = !IsAndroid && test( /ipod | iphone/); if(IsIPhone == true){ console. log( "裝置是IPhone"); } var IsIOS = IsIPad || IsIPhone; if(IsIPhone == true){ console. log( "裝置是IOS"); } var IsWinPhone = test( /windows phone/); if(IsWinPhone == true){ console. log( "裝置是WinPhone"); } var IsWebapp = !!NA[ 'standalone']; if(IsWebapp == true){ console. log( "裝置是Webapp"); } var IsXiaoMi = IsAndroid && test( /mi | s + /); if(IsXiaoMi == true){ console. log( "裝置是XiaoMi"); } var IsUC = test( /ucbrowser/); if(IsUC == true){ console. log( "裝置是UC"); } var IsWeixin = test( /micromessenger/); if(IsWeixin == true){ console. log( "裝置是Weixin"); } var IsBaiduBrowser = test( /baidubrowser/); if(IsBaiduBrowser == true){ console. log( "裝置是BaiduBrowser"); } var IsChrome = !!WIN[ "chrome"]; if(IsChrome == true){ console. log( "裝置是Chrome"); } var IsBaiduBox = test( /baiduboxapp/); if(IsBaiduBox == true){ console. log( "裝置是BaiduBox"); } var IsPC = !IsAndroid && !IsIOS && !IsWinPhone; if(IsPC == true){ console. log( "裝置是PC"); } var IsHTC = IsAndroid && test( /htc \s + /); if(IsHTC == true){ console. log( "裝置是HTC"); } var IsBaiduWallet = test( /baiduwallet/); if(IsBaiduWallet == true){ console. log( "裝置是BaiduWallet"); } }