简述移动端与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\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可以完美解决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);
          });