Mobile Development (i): basic knowledge

Touch events

There are three basic touch events that are listed in the specification and have been widely implemented across mobile devices:

1. Touchstart: Place your finger on a DOM element.

2. Touchmove: Drag a DOM element with your finger.

3. Touchend: Move the finger away from a DOM element.

Each touch event includes three touch lists:

1. Touches: A list of all the fingers that are currently on the screen.

2. Targettouches: A list of the fingers that are located on the current DOM element.

3. Changedtouches: A list of fingers that involve the current event.

For example, in a Touchend event, this would be a moving finger. These lists consist of objects that contain touch information:

1. Identifier: A numeric value that uniquely identifies the current finger in a touch session.

2. The Target:dom element is the target of the action.

3. Client/page/screen coordinates: The position where the action takes place on the screen.

4. Radius coordinates and RotationAngle: Draw an ellipse roughly equivalent to the shape of a finger.

Make a test up and down left and right swipe gesture JS

varSX = SY = ex = EY = 0;//SX sy Start (x, y) coordinates ex EY endpoint (x, y) coordinatesDocument.addeventlistener ("Touchstart",function(){//when touch occursSX = Event.touches[0].pagex;//get the start x coordinate of a fingerSY = event.touches[0].pagey;}) Document.addeventlistener ("Touched",function(){//when your fingers move awayex = Event.changedtouches[0].pagex;//get the x-coordinate of a finger's removalEY = event.changedtocches[0].pagey; varDvaluex = EX-SX,//vector for calculating end and start strokeDvaluey = ey-Sy; if(Math.Abs (Dvaluex) >= Math.Abs (Dvaluey)) {//The range of sliding to left and right is larger than the upper and lower sliding range, which is considered to be transverse sliding        //X-Axis        if(Dvaluex >= 0) {Console.log ("Right"); }Else{Console.log ("Left"); }    }Else{        //Y-Axis        if(Dvaluey >= 0) {Console.log ("Bottom"); }Else{Console.log ("Top"); }    }})

<meta> Meta Information settings

1. Disable zooming

The page window width is set to match the screen width dimensions, and the zoom is disabled. For the current mobile device by default can zoom screen function, prevent the page due to scaling caused by deformation, or low resolution and so on.

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

2. Ignore digital recognition as phone number

<name= "format-detection"  content= "Telephone=no"/> 

3. Ignore andriod for mailbox recognition

<name= "format-detection"  content= "Email=no"  >

4. Safari for iOS, Home screen Quick Start, support hide Address bar

<name= "apple-mobile-web-app-capable"  content= "yes">  <!-- -

Mobile Development (i): basic knowledge