JavaScript如何判断设备类型加载对应网页并设置通用事件
基本思路:
在网页入口添加判断逻辑,如下:首先获取当前navigator对象的userAgent,通过userAgent判断当前设备类型。
①:如果符合移动端判断逻辑,则加载移动端入口;否则加载pc端入口
②:通用事件的设置,比如点击事件,PC端为click,但是移动端也用click的话分不清是长按还是点击;根据平台类型设置通用事件,可以在写触发函数时不用每次都判断。
举个例子:如下图,点击语言选择按钮弹出语言选择框,用click事件的话,PC端没有什么问题,但是移动端的话长按时不应该弹出,应该手指离开时再显示。这时我们可以给window定义一个事件,比如clickEvent,在当前页面下载时设置这个clickEvent对应的正确的事件。在写触发函数时就不必判断当前设备类型。
设置clickEvent后实现上边需求的源码:
$('.select-language').on(clickEvent, () => {
$('.language-pop').fadeIn()
})
JavaScript判断设备类型加载对应网页并设置通用事件源码:
(function(){
var userAgent = window.navigator.userAgent;
var ua = userAgent.toLowerCase();
var platform = {
isAndroid: function() {
return ua.indexOf("android") > -1;
},
isIOS: function() {
return ua.indexOf("iphone") > -1;
},
isWinPhone: function() {
return !!navigator.userAgent.match(/Windows Phone/i);
},
isIpad : function(){
return ua.indexOf("ipad") > -1;
},
isPhone: function() {
return this.isAndroid() || this.isIOS() || this.isWinPhone() || this.isIpad();
}
}
if(!platform.isPhone()){
window.location.href = window.location.href.replace("mobile.html","pc.html");
}
window.isPhone = platform.isPhone();
window.clickEvent = isPhone ? 'touchend':'click';
window.moveEvent = isPhone ? 'touchmove':'mousemove';
window.clickStart = isPhone? 'touchstart' : 'mousedown';
window.clickEnd = isPhone? 'touchend' : 'mouseup';
})();