简述移动端与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
点透：
概念：列表页⾯上创建⼀个弹出层，弹出层有个关闭按钮，你点了这个按钮关闭弹出层后后，这个按钮正下⽅的内容
也会执⾏点击事件（或打开链接）。
出现的原因：
可以看出zepto的tap通过兼听绑定在document上的touch事件来完成tap事件的模拟的，及tap事件是冒泡到document上触发的,
再点击完成时的tap事件(touchstart\touchend)需要冒泡到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可以完美解决
引⼊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(){
//很多处理⽐如隐藏什么的
jquery是什么功能组件},320);
});
发表评论