移动端笔记移动端移动端页面（响应式） media query（使用）手机端要加一个 meta 手机端的交互方式不一

移动端

移动端页面（响应式）

media query（使用）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>media使用</title>
    <style>
        /* 1.4、超小设备（手机，小于 768px） */
        @media (min-width:480px) {
            div {
                background: peru;
            }

        }

        /* 1.3、小型设备（平板电脑，768px 起） */
        @media (min-width:768px) {
            div {
                background: black;
                color: bisque;
            }
        }

        /* 1.2、中型设备（台式电脑，992px 起） */
        @media (min-width:992px) {
            div {
                background: yellow;
            }
        }

        /* 1.1、 大型设备（大台式电脑，1200px 起） */
        @media (min-width:1200px) {
            div {
                background: red;
            }
        }
    </style>
</head>

<body>
    <div>
        我是media 媒体查询
    </div>
</body>

</html>

手机端要加一个 meta

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

属性说明

width=device-width ：应用程序的宽度和屏幕的宽度是一样的
height=device-height ：应用程序的高度和屏幕的高是一样的
initial-scale=1.0 :应用程序启动时候的缩放尺度（1.0表示不缩放）
minimum-scale=1.0 ：用户可以缩放到的最小尺度（1.0表示不缩放
maximum-scale=1.0* ：用户可以放大到的最大尺度（1.0表示不缩放）
user-scalable=no ：用户是否可以通过他的手势来缩放整个应用程序，使应用程序的尺度发生一个改变，取值0或1，yes或no

手机端的交互方式不一样

没有 hover
有 touch 事件
没有 resize
没有滚动条

移动端基本事件

基础事件

touchstart 手指按下时触发
touchmove 手指移动时触发
touchend 手指抬起时触发

** 使用方法 **

我们在使用上面三个事件时，要用js 的事件绑定方式去使用（addEventListener()）, JQ 的 on() 等绑定事件不起作用，

示例

var box = document.querySelector("#box");
box.addEventListener("touchstart",start);
 
function start(e) {
  console.log("按下手指");
  console.log(e)
}

移动端事件对象

移动端中通过事件对象我们能获取很多信息。比如，手指点击的坐标，手指一动的距离，点击屏幕的手指个数等等。

tocuhes 当前手指触屏的个数

targetTouches 位于当前DOM 元素上的手指的一个列表

changeTocuhes 涉及当前事件的手指的一个列表

clientX 触摸目标在视口中的x坐标

clientY 触摸目标在视口中的Y坐标

pageX 触摸目标在页面中的x坐标

pageY 触摸目标在页面中的y坐标

screenX 触摸目标在屏幕中的x坐标

screenY 触摸目标在屏幕中的y坐标

<div class="warp"></div>
 
<script>
 var div = document.querySelector(".warp");
 
div.addEventListener("touchstart",function(e){
   console.log(e)
   div.innerHTML =e.targetTouches.length;
});
</script>

如果要获取触摸点的坐标，要这样做：

div.addEventListener("touchstart",function(e){   var tager = e.touches[0] // 获取第一个触点   div.innerHTML = tager.pageX;});

.注意事项

移动端的点透：当上层元素发生点击的时候，下层元素也有点击特性，在300ms之后，如果上层元素消失或者隐藏，目标点就会“漂移”到下层元素身上，就会触发点击行为

解决：

1.下层不要使用有点击特性的元素

2.阻止PC事件

e.preventDefault();

阻止默认事件还会解决IOS10 下使用 overflow:hidden 失效问题

阻止默认事件还会禁止系统默认的滚动条，阻止橡皮筋效果

阻止默认事件还会禁止长按选中文字，选中图片，系统默认菜单。

移动端陀螺仪

1.重力感应（事件是绑定在window 上的） devicemotion 事件事件对象（主要） acceration : 一个包含x,y,z 的属性对象，在不考虑重力的情况下，告诉你在每个方向上的加速度。 accelerationIncludingGravity : 一个包含x,y,z 的属性对象，在考虑z轴自然重力加速度的情况下，告诉你在每个方向上的加速度。 rotationRate : 一个包含表示方向的 alpha、beta 和 gamma属性对象。

 var div = document.querySelector('div');
     window.addEventListener('devicemotion',function(e){
      console.log(e)
        var motion = e.accelerationIncludingGravity;
        var x = motion.x;
        var y = motion.y;
        var z = motion.z; // 安卓显示正直，ios显示负值
 
        div.innerHTML = "x: " + x;
        div.innerHTML += "<br/>y: " + y;
        div.innerHTML += "<br/>z: " + z;
     })

横竖屏检测

orientationchange 事件其中 window.orientatio 包含了设备横竖屏转动时的几个值： 0：表示肖像模式 90：表示向左旋转的横向模式 -90：表示向右旋转的横向模式

var p = document.querySelector('p');
  window.addEventListener('deviceorientation',function(e){    
       body.innerHTML = "Z: " + e.alpha;  // 手机z轴旋转角度
    })