js移动设备基础笔记

获取独立像素与物理像素比例值

// 像素和设备独立像素的一个关系
    alert(window.devicePixelRatio);

获取设备物理像素比

// 以像素计，屏幕的大小
    var screenWidth = window.screen.width;
    var screenHeight = window.screen.height;

    console.log('屏幕的宽度为: ' + screenWidth);
    console.log('屏幕的高度为: ' + screenHeight);

移动设备 视图窗口

    <!--对viewport的设置的meta建议写在已有的meta标签(<meta charset="UTF-8">)之后-->
    <!--name="viewport":说明当前meta标签是用来设置viewport的属性的，这个属性只有在移动端才会有效-->
    <!--content="":进行viewport的设置
    width:设置viewport的宽度  device-width:获取当前设备的宽度
    initial-scale=1:设置初始缩放比例  当我们设置width=device-width，也达到了initial-scale=1的效果，得知其实 initial-scale = ideal viewport / layout viewport  意味着，如果initial-scale设置为1，相当于设置了两个viewport的宽度一致
    maximum-scale:设置最大的缩放比例
    minimum-scale:设置默认状态下最小的缩放比例-->
    <!--<meta name="viewport" content="width=device-width">-->
    <!--<meta name="viewport" content="initial-scale=1
    <!-- user-scalable:设置是否允许用户进行缩放yes/no">-->

touch说明 必循在移动端上

<script>
    /*1.获取dom元素*/
    var div=document.querySelector("div");
    /*2.添加事件*/
    /*添加开始触摸事件：当手指触摸到屏幕时触发*/
    div.addEventListener("touchstart",function(){
     
        console.log("touchstart");
    });
    /*添加手指滑动事件，当手指在屏幕上滑动时触发:move事件是持续触发*/
    div.addEventListener("touchmove",function(){
     
        console.log("touchmove");
    });
    /*添加触摸结束事件：当手指离开屏幕时触发*/
    div.addEventListener("touchend",function(){
     
        console.log("touchend");
    });
    /*添加触摸意外中断事件*/
    div.addEventListener("touchcancel",function(){
     

    });
</script>

开始触摸与结束触摸

<script>
    var div=document.querySelector("div");
    /*开始触摸*/
    div.addEventListener("touchstart",function(e){
     
//        console.log(e.touches);
        /*console.log(e.changedTouches);*/
        console.log(e.targetTouches[0]