移动端的总结（一）

// 一.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");

}

}