真机调试
1.将做好的网页上传至服务器或者本地搭建服务器,然后通过移动设备通过网络来访问
2.借助第三方的调试工具ghoslab viewport详解 为了达到兼容这样写 <meta name="viewport" content="width=device-width,initial-scale=1"> maximum-scale=2
minimum-scale=1 user-scalable=no
手指对象的坐标值
screenX/screenY : 是手指触摸点相对屏幕左上角的坐标距离
clientX/clientY是相对于当前视口
pageX/pageY相对页面的内容,会有滚动条
<script>
var div = document.querySelector("div");
var startX,startY,moveX,moveY,distanceX,distanceY;
div.addEventListener("touchstart",function(e){
startX = e.targetTouches[0].clientX;
startY = e.targetTouches[0].clientY;
});
div.addEventListener("touchmove",function(e){
moveX = e.targetTouches[0].clientX;
moveY = e.targetTouches[0].clientY;
distanceX = moveX - startX;
distanceY = moveY - startY;
//设置偏移
div.style.transform = "translate("+distanceX+"px,"+distanceY+"px)";
}) ;
</script>
插件fastclick isscroll swipe