简述移动端与PC端的区别

一、移动端与PC端的区别

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

二、如何解决移动端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
    • 点透：http://www.javashuo.com/article/p-nwgsqgiz-y.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);
          });