PC端和手机端点击事件融合适配

有时我们在做响应式网站，需要既在PC在预览，也可以在手机端预览，那么就需要区分下两端的不同交互事件，拿最常用的点击事件举例，PC端点击事件是“click”，在手机端点击事件则是“touchstart”，通常有两种方法解决，

1、使用不同js文件，通过判断终端来引用不同js

<script type="text/javascript">   

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|wOSBrowser|BrowserNG|WebOS)/i))) {
		var scriptNode = document.createElement("script");
		scriptNode.setAttribute("src", "js/indexPhone.js");
		document.body.appendChild(scriptNode);
	}
	else {
		var scriptNode = document.createElement("script");
		scriptNode.setAttribute("src", "js/index.js");
		document.body.appendChild(scriptNode);
	}
</script>

2、使用同一个js文件，通过判断终端来区别使用

var changeClick
function isPhone() {
    // 判断是在移动端还是在pc端
    var ua = navigator.userAgent,
        isWindowsPhone = /(?:Windows Phone)/.test(ua),
        isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone,
        isAndroid = /(?:Android)/.test(ua),
        isFireFox = /(?:Firefox)/.test(ua),
        isChrome = /(?:Chrome|CriOS)/.test(ua),
        isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || (isFireFox && /(?:Tablet)/.test(ua)),
        isPhone = /(?:iPhone)/.test(ua),
        isPc = !isPhone && !isAndroid && !isSymbian && !isTablet;
    return !isPc;
}
if (isPhone()) {
    changeClick = 'touchstart'
} else {
    changeClick = 'click'
}

$('.box').on(changeClick,function(){
    //点击事件
})

以上可以解决两端交互事件不同的问题。

同样css样式在两端的适配也有两种方法

1、通过js判断移动端和PC端采用两套不同的css样式文件，便于分开管理和开发

<script type="text/javascript">
function loadCSS() {
				 
if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|wOSBrowser|BrowserNG|WebOS)/i))) {
	    document.write('<link href="css/indexPhone.css" rel="stylesheet" type="text/css" />');
	}
	else {
		document.write('<link href="css/index.css" rel="stylesheet" type="text/css" />');
	}
}
loadCSS();
</script>

2、css媒体查询

根据屏幕宽度通过媒体查询判断移动端和PC端，从而赋予不同样式

/* 媒体查询 */
@media (min-width: 768px) {
    /* PC样式 */
    .box {
        background:#f00;
    }
}

@media (max-width: 767px) {
    /* 移动端样式 */
    .box {
        background:#00f;
    }
}