Viewport and judging the moving end sliding up and down

Devicepixelratio Window Object

Has a Devicepixelratio property,

Its official definition is: device physical pixels and device independent pixel ratio, that is

Devicepixelratio = physical pixels/independent pixels.

Get device independent pixels (screen width)

Document.documentElement.clientWidth

Window.screen.width

$ (window). Width ()

<script>
var x=document.documentelement.clientwidth;
var winx=window.screen.width; (The total width of the screen, and regardless of how the window size, its value is unchanged)
var wh=$ (window). width ();
Alert (x+ ' +winx+ ' +wh);
</script>

Second, Meta Viewport

<meta name= "viewport" content= "width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0, User-scalable=no ">

Width Set viewport width, positive integer, or Width-device

Initial-scale Setting the initial zoom value of the page

Minimum-scale Setting the page minimum zoom value

Maximum-scale Setting the page minimum zoom value

User-scalable user scaling with a value of "no" or "yes" height rarely used

Three,JS basic touch Events

> Touchstart Start

> Touchmove Slide

> Touchend End

Document.addeventlistener (' Touchstart ', function (EV) {console.log (EV);}, False);

Example:

Judging the mobile phone to swipe up and down

var starty=0,endy=0,flag=false;
document.addeventlistener (' Touchstart ', function (e) {
Starty=e.targettouches[0].pagey;
//console.log (e);
},false);
document.addeventlistener (' Touchmove ', function (e) {
Endy=e.targettouches[0].pagey;
if (starty-endy>100| | starty-endy<-100) {
flag=true;
}

},false);
document.addeventlistener (' Touchend ', function (e) {
if (flag) {
if (starty-endy>100) {
alert (' Top slip ');
}
if (starty-endy<-100) {
alert (' slipping ');
}
}
},false);

Viewport and judging the moving end sliding up and down