zoukankan      html  css  js  c++  java
  • 简述移动端与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);
              });    
  • 相关阅读:
    sqlserver编程基本语法
    每日一记--技术小细节
    每日一记--jsp
    每日一记--session/servletContext
    每日一记--cookie
    每日一记--HashTable/HashMap/ConcurrentHashMap
    每日一记--Ajax(下)
    每日一记--Axjx
    每日一记--索引/过滤器
    每日一记--酱油日
  • 原文地址:https://www.cnblogs.com/wxh0929/p/11157913.html
Copyright © 2011-2022 走看看