简述移动端与PC端的区别

1、移动端与PC端的区别

PC考虑的是浏览器的兼容性，而移动端开发考虑的更多的是手机兼容性，因为目前不管是android手机还是ios手机，一般浏览器使用的都是webkit内核，所以说做移动端开发，更多考虑的应该是手机分辨率的适配，和不同操作系统的略微差异化；
在部分事件的处理上，移动端多出来的事件是触屏事件，而缺少的是hover事件。另外包括移动端弹出的手机键盘的处理，这样的问题在PC端都是遇不到的；
在布局上，移动端开发一般是要做到布局自适应的；
在动画处理上，PC端由于要考虑IE的兼容性，所以通常使用JS做动画的通用性会更好一些，但是CSS3做了很大的牺牲，而在手机端，如果要做一些动画、特效等，第一选择肯定是CSS3，既简单、效率又高；
一般pc端用jquery，移动端用zepto，因为移动端的流量还是比较重要的，所以引入的资源或者插件，能小则小，一个30k的资源和一个80k的资源，在移动端的差别还是挺大的；（而未压缩的jquery是262kb，压缩的jquey是83kb，可见两者的差别之大。）
比如在手机上的300ms的延迟，这在PC端是没有的；

2、如何解决移动端click屏幕产生200-300ms的延迟响应问题？

产生的原因：
当用户一次点击屏幕之后，浏览器并不能立刻判断用户是要进行双击缩放，还是想要进行单击操作。因此，iOS Safari 就等待 300 毫秒，以判断用户是否再次点击了屏幕。

于是，300 毫秒延迟就这么诞生了。
造成的问题：按钮点击延迟或者按钮点击失效；

解决方案：

禁用缩放 meta标签
更改默认的视口宽度

fastClick.js （常见）

步骤一：引入js文件：
步骤二：引入下面任何一种js代码
//第一种   最好在body前面引入下面的代码
if ('addEventListener' in document) {
   document.addEventListener('DOMContentLoaded', function() {
       FastClick.attach(document.body);
   }, false);
}
//第二种：引入jquery组件
$(function() {
    FastClick.attach(document.body);
})
//第三种
window.addEventListener( "load", function() {
    FastClick.attach( document.body );
}, false );

touch.js

zepto (做移动端的DOM操作但是做移动端事件的时候非常不建议用zepto里面的touch模块，即用tap事件来取代click事件，因为tap事件会有 “点透” 问题)

jquery是作用于pc端 277kb

zepto作用于移动端 56kb

点透：https://www.cnblogs.com/cdwp8/p/4307855.html

概念：列表页面上创建一个弹出层，弹出层有个关闭按钮，你点了这个按钮关闭弹出层后后，这个按钮正下方的内容也会执行点击事件（或打开链接）。

出现的原因：

可以看出zepto的tap通过兼听绑定在document上的touch事件来完成tap事件的模拟的,及tap事件是冒泡到document上触发的,
再点击完成时的tap事件(touchstart	ouchend)需要冒泡到document上才会触发，而在冒泡到document之前，用户手的接触屏幕(touchstart)
和离开屏幕(touchend)是会触发click事件的,因为click事件有延迟触发(这就是为什么移动端不用click而用tap的原因)(大概是300ms,
为了实现safari的双击事件的设计)，所以在执行完tap事件之后，弹出来的选择组件马上就隐藏了，此时click事件还在延迟的300ms之中，
当300ms到来的时候，click到的其实不是完成而是隐藏之后的下方的元素，如果正下方的元素绑定的有click事件此时便会触发，
如果没有绑定click事件的话就当没click，但是正下方的是input输入框(或者select选择框或者单选复选框)，点击默认聚焦而弹出输入键盘，
也就出现了上面的点透现象。

解决方法：
- 用click事件取代tap事件，在引入fastclick.js解决300ms延迟；（终极方案）
- 来得很直接github上有个fastclick可以完美解决https://github.com/ftlabs/fastclick
  - 引入fastclick.js，因为fastclick源码不依赖其他库所以你可以在原生的js前直接加上；
```
window.addEventListener( "load", function() {
    FastClick.attach( document.body );
}, false );
```
  - 或者有zepto或者jqm的js里面加上；
```
$(function() {
    FastClick.attach(document.body);
});
```
  - 当然require的话就这样；
```
var FastClick = require(‘fastclick‘);
FastClick.attach(document.body, options);
```
- touchend代替tap事件并阻止掉touchend的默认行为preventDefault()；
```
$("#cbFinish").on("touchend", function (event) {
    //很多处理比如隐藏什么的
   event.preventDefault();
});
```
- 延迟一定的时间(300ms+)来处理事件；
```
$("#cbFinish").on("tap", function (event) {
    setTimeout(function(){
    //很多处理比如隐藏什么的
     },320);
});    
```