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