移动端的总结(一)



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








猜你喜欢

转载自blog.csdn.net/zhuaaaa3944210/article/details/80838720