Viewport及判断移动端上下滑动

Posted 2020-08-16 微笑

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);