1、像素知识

　　px: css pixels，逻辑像素，浏览器使用的抽象单位

　　dp,pt:device independent pixels ，设备无关像素

　　dpr:devicePixelRatio 设备像素缩放比

　　

　　计算公司：1px=(dpr)*dpr*dp

2、Viewport

　　手机浏览器默认为我们做了两件事。

　　　　一：页面渲染在一个980px(iso)的Viewport。

　　　　二：缩放

　　是有 visual Viewport 与 layout viewport.

　　最佳meta设置如下：

　　<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

　　window.innerWidth/document.body.clientWidth=缩放比

　　【布局Viewport】=【设备宽度】=【度量Viewport】

3、Tap基础事件

　　自定义Tap事件原理：

　　在touchstart、touchend时记录时间、手指位置，在touchend时进行比较，如果手指位置为同一位置（或允许移动一个非常小的位移值），

　　且事件间隔较短（一般认为是200ms）,且过程中未触发过touchmove，即可认为触发了手持设备的"click",一般称为"tap"。

　　Tap透传Bug

　　解决方案：

　　1、使用缓动动画，过渡300ms延迟。

　　2、中间层dom元素的加入，让中间层接受这个“穿透”事件，稍后隐藏。

　　3、上下都使用"tap"事件。

四、Touch 基础事件

　　touchstart、touchmove、touchend、touchcancel(系统取消touch时触发）。

　　Bug：

　　　　Android只会触发一次touchstart,一次touchmove,touchend不触发。

　　在 touchmove中加入：event.preventDefault(),但会导致默认行为不发生，比如scroll。

　　触摸板上下左右滑动事例：

<style>

    .touchpad{

        width: %;

        height: 200px;

        font-size: 40px;

        text-align: center;

        line-height: 200px;

        background: rgba(,,,0.5);

        position: relative;

        color: #ddd;

    }

    .ball{

        display: none;

        position: absolute;

        width: 25px;

        height: 25px;

        border-radius: 15px;

        background-color: #7AE6FF;

        top: ;

        left: ;

    }

    p{

        height: 30px;

    }

</style>

</head>

<body>

<p id="desc"></p>

<div id="touchPad" class="touchpad">触摸板</div>

<div id="ball" class="ball"></div>

<script src="../js/zepto.js"></script>

<script type="text/javascript">

    var touchpad = document.querySelector('#touchPad'),

        ball = document.querySelector('#ball'),

        desc = document.querySelector('#desc');

    //获取touch的点(兼容mouse事件)

    var getTouchPos = function(e){

        var touches = e.touches;

        if(touches && touches[]) {

            return { x : touches[].clientX ,

                     y : touches[].clientY };

        }

        return { x : e.clientX , y: e.clientY };

    }

    //计算两点之间距离

    var getDist = function(p1 , p2){

        if(!p1 || !p2) return ;

        return Math.sqrt((p1.x - p2.x) * (p1.x - p2.x) + (p1.y - p2.y) * (p1.y - p2.y));

    }

    //计算两点之间所成角度

    var getAngle = function(p1 , p2){

        var r = Math.atan2(p2.y - p1.y, p2.x - p1.x);

        var a = r *  / Math.PI;

        return a;

    };

     //获取swipe的方向

    var getSwipeDirection = function(p2,p1){

        var dx = p2.x - p1.x;

        var dy = -p2.y + p1.y;

        var angle = Math.atan2(dy , dx) *  / Math.PI;

        if(angle <  && angle > -) return "right";

        if(angle >=  && angle < ) return "top";

        if(angle >=  || angle < -) return "left";

        if(angle >= - && angle <= -) return "bottom";

    }

    var startEvtHandler = function(e){

        var pos = getTouchPos(e);

        ball.style.left = pos.x + 'px';

        ball.style.top = pos.y + 'px';

        ball.style.display = 'block';

        var touches = e.touches;

        if( !touches || touches.length ==  ){ //touches为空，代表鼠标点击

            point_start = getTouchPos(e);

            time_start = Date.now();

        }

    }

    var moveEvtHandler = function(e){

        var pos = getTouchPos(e);

        ball.style.left = pos.x + 'px';

        ball.style.top = pos.y + 'px';

        point_end = getTouchPos(e);

        e.preventDefault();

    }

    //touchend的touches和targetTouches没有对象，只有changeTouches才有

    var endEvtHandler = function(e){

        ball.style.display = 'none';

        var time_end = Date.now();

        //距离和时间都符合

        if(getDist(point_start,point_end) > SWIPE_DISTANCE && time_start- time_end < SWIPE_TIME){

           var dir = getSwipeDirection(point_end,point_start);

           touchPad.innerHTML = 'swipe'+dir;

        }

    }

    var SWIPE_DISTANCE = ;  //移动30px之后才认为swipe事件

    var SWIPE_TIME = ;     //swipe最大经历时间

    var point_start,

        point_end,

        time_start,

        time_end;

    //判断是PC或者移动设备

    var startEvt, moveEvt, endEvt;

    if("ontouchstart" in window){

        startEvt="touchstart";

        moveEvt="touchmove";

        endEvt="touchend";

    }else{

        startEvt="mousedown";

        moveEvt="mousemove";

        endEvt="mouseup";

    }

    touchpad.addEventListener(startEvt, startEvtHandler);

    touchpad.addEventListener(moveEvt, moveEvtHandler);

    touchpad.addEventListener(endEvt, endEvtHandler);

</script>

</body>

　　

移动web知识的更多相关文章

  1. Java Web知识梳理

    今天给内部做了个培训,貌似搞错了对象,不该对新人讲这么原理性的东西. anyway,还是放上来吧,不知道有没有人能理清其中的逻辑 ^ _ ^ 问题:为什么要用tomcattomcat: servlet ...

  2. Web知识简易介绍及HTTP知识总结

    一.软件系统体系结构: 常见软件系统体系结构B/S.C/S C/S结构即客户端/服务器(Client/Server),例如QQ: 缺点:软件更新是需要同时更新客户端和服务器端两端,比较麻烦 优点:安全 ...

  3. web知识—协议

    web使用超文本传输协议(HTTP,HyperText Transfer Protocol)进行通信.http在1990年左右出现,现在有0.9/1.0/1.1三个版本.在早期的互联网中的一些协议只能 ...

  4. 前端(web)知识-html

    前端由三部分组成: HTML(标签)--CSS(美化,修饰)--JS(执行指令) HTML(超文本标记语言,Hypertext Markup Language):是一种用于创建网页的标记语言. 本质上 ...

  5. 02 CTF WEB 知识梳理

    1. 工具集 基础工具 Burpsuit, Python, FireFox(Hackbar, FoxyProxy, User-Agent Swither .etc) Burpsuit 代理工具,攻击w ...

  6. Web知识总结

    一)window.location.href和window.location.replace的区别 1.window.location.href=“url”:改变url地址: 2.window.loc ...

  7. 开始逐步补充下相关Web知识，很多年没搞了....

    <script type="text/javascript"> $(function(){ ShowProduct(); $("#ShowUserInfo&q ...

  8. web知识清单

    声名随笔中的实例链接到另一个博客是我本人的另一个博客号 模块一:HTML 1.html是什么: hyperText markup language超文本标记语言 超文本:比文本更丰富的内容 所有的浏览 ...

  9. 1 Web 知识基础

    一.什么是跨域访问举个栗子:在A网站中,我们希望使用Ajax来获得B网站中的特定内容.如果A网站与B网站不在同一个域中,那么就出现了跨域访问问题.你可以理解为两个域名之间不能跨过域名来发送请求或者请求 ...

随机推荐

  1. ENode框架Conference案例转载

    ENode框架Conference案例分析系列之 - Quick Start 前言 前一篇文章介绍了Conference案例的架构设计,本篇文章开始介绍Conference案例的代码实现.由于代码比较 ...

  2. Nyoj 修路方案(次小生成树)

    描述 南将军率领着许多部队,它们分别驻扎在N个不同的城市里,这些城市分别编号1~N,由于交通不太便利,南将军准备修路. 现在已经知道哪些城市之间可以修路,如果修路,花费是多少. 现在,军师小工已经找到 ...

  3. MSMQ-发送消息到远程专用队列 实例

    目录 一:MSMQ的一些理论上的知识 二:队列类型(Queue Type) 三:安装消息队列 四:在C#中Messagequeue class 五:MSMQ-发送消息到远程专用队列 六:例子   一. ...

  4. React.js终探（五）

    在React中,一切都是看做组件. 而组件的嵌套也是十分常见的. 所以有的组件就作为容器组件 容器组件 React元素可以包含子元素 如 //JSX <ezpanel title="t ...

  5. MVC推荐教程和文章列表

    着手Getting Started Getting Started with ASP.NET MVC 5 (共11部分) Pluralsight ASP.NET MVC 5 Fundamentals( ...

  6. crawler_JVM_DNS_在爬虫中的应用

    DNS解析:即由域名 经过dns解析,跳转到真正服务器的地址,这个重复解析的耗时占请求很大比例. 在设计爬虫时比较细粒度的控制下,需要考虑dns解析. jdk从1.5往后对dns缓存有默认设置, 详见 ...

  7. DES加密深度优化——随机生成加密字符串

    DES全称为Data Encryption Standard,即数据加密标准,是一种使用密钥加密的块算法.但该算法一旦密钥固定,加密的字符串也就随之固定,这不利于数据存储安全.而且用该方法加密后有一个 ...

  8. 转载Worktile 技术架构概要

    Worktile 技术架构概要 其实早就该写这篇博客了,一直说忙于工作没有时间,其实时间挤挤总会有的,可能就是因为懒吧!从2013年11月一直拖到现在,今天就简单谈谈 Worktile 的技术架构吧 ...

  9. 【高德地图API】从零开始学高德JS API（三）覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物

    原文:[高德地图API]从零开始学高德JS API(三)覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物 摘要:覆盖物,是一张地图的灵魂.有覆盖物的地图,才是完整的地图.在 ...

  10. C++程序中应增加STL、运算和字符串的头文件

    #include <complex> //模板类complex的标准头文件 #include <valarray> //模板类valarray的标准头文件 #include & ...