移动端开发（一）：基础知识

触摸事件

三种在规范中列出并获得跨移动设备广泛实现的基本触摸事件：

1. touchstart ：手指放在一个DOM元素上。

2. touchmove ：手指拖曳一个DOM元素。

3. touchend ：手指从一个DOM元素上移开。

 

每个触摸事件都包括了三个触摸列表：

1. touches ：当前位于屏幕上的所有手指的一个列表。

2. targetTouches ：位于当前DOM元素上的手指的一个列表。

3. changedTouches ：涉及当前事件的手指的一个列表。

 

例如，在一个touchend事件中，这就会是移开的手指。这些列表由包含了触摸信息的对象组成：

1. identifier ：一个数值，唯一标识触摸会话（touch session）中的当前手指。

2. target ：DOM元素，是动作所针对的目标。

3. 客户/页面/屏幕坐标 ：动作在屏幕上发生的位置。

4. 半径坐标和 rotationAngle ：画出大约相当于手指形状的椭圆形。

 

 

制作一个测试上下左右滑动手势的js

var sx = sy = ex = ey = 0; // sx sy 起始的(x,y)坐标 ex ey 终点的（x,y）坐标

document.addEventListener("touchstart", function(){  // 触摸发生时
    sx = event.touches[0].pageX;  // 获得一个手指的起始x坐标
    sy = event.touches[0].pageY;
})

document.addEventListener("touched",function(){  // 手指移开时
    ex = event.changedTouches[0].pageX;  // 获得一个手指的移除x坐标
    ey = event.changedTocches[0].pageY;

    var dvaluex = ex - sx,  // 计算终点和起点行程的向量
        dvaluey = ey - sy;
    if(Math.abs(dvaluex) >= Math.abs(dvaluey)){  // 向左右滑动的范围比上下滑动的范围大，认为是发生横向滑动
        // x轴 
        if( dvaluex >= 0){
            console.log("right");
        }else{
            console.log("left");
        }
    }else{
        // y轴
        if(dvaluey >= 0){
            console.log("bottom");
        }else{
            console.log("top");
        }
    }
})

 

<meta>元信息设置

1. 禁止缩放

页面窗口宽度设置成与屏幕宽度尺寸一致，且禁止缩放。针对当前移动设备的默认可以缩放屏幕功能，防治页面由于缩放导致变形，或分辨率过低等情况。

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimun-scale=1.0,maximun-sacle=1.0,user-scalable=no" /> 

 

2. 忽略数字识别为电话号码　　

 <meta name="format-detection" content="telephone=no" />

 

3. 忽略andriod对邮箱的识别

<meta name="format-detection" content="email=no">

 

4. 针对ios 的 safari，主屏幕快速启动，支持隐藏地址栏

<meta name="apple-mobile-web-app-capable" content="yes"> <!-- ios safari 7.0以上 不支持 -->