Viewport及判斷移動端上下滑動

標籤：並且   觸摸事件   port   nim   ble   listener   它的   移動端   整數   

devicePixelRatio window對象

有一個devicePixelRatio屬性，

它的官方的定義為：裝置物理像素和裝置獨立像素的比例，也就是

devicePixelRatio = 物理像素 / 獨立像素。

擷取裝置獨立像素(螢幕寬度)

document.documentElement.clientWidth

window.screen.width

$(window).width()

<script>
var x=document.documentElement.clientWidth;
var winx=window.screen.width;（螢幕總寬度，並且無論怎樣變幻視窗大小，其值不變）
var wh=$(window).width();
alert(x+‘ ‘+winx+‘ ‘+wh);
</script>

二、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 設定視口寬度，正整數或 width-device

initial-scale 設定頁面的初始縮放值

minimum-scale 設定頁面最小縮放值

maximum-scale 設定頁面最小縮放值

user-scalable 使用者縮放，值為“no”或“yes” height 很少使用

三、JS基本觸摸事件

> touchstart 開始

> touchmove 滑動

> touchend 結束

document.addEventListener(‘touchstart‘,function (ev){ console.log(ev); }, false);

例子：

判斷手機端上下滑動

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(‘上滑‘);
　　　　}
　　if(startY-endy<-100){
　　　　alert(‘下滑‘);
　　　　}
　　}
},false);

 

Viewport及判斷移動端上下滑動