移动端开发


1 (function(){
2     setRem();
3     window.addEventListener(‘orientation‘ in window?"deviceorientation":"resize",setRem);
4     function setRem(){
5         var html = document.documentElement;
6         var width = html.clientWidth;
7         html.style.fontSize = width/16 + "px";
8     }
9 })();

 

1 (function(){
2                 var html = document.documentElement;
3                 var hWidth = html.getBoundingClientRect().width;
4 //                console.log( hWidth );
5                 html.style.fontSize = hWidth/16 + "px";
6             })()
 1 /*
 2         移动端的三大事件:
 3             手指按下:
 4                 ontouchstart
 5             手指移动:
 6                 ontouchmove
 7             手指抬起
 8                 ontouchend
 9                 
10         注意:
11             在移动端开发的时候,浏览器的模拟器时好时坏,一般不用on的方式绑定事件函数,要用事件绑定的方式(addEventListener)。
12     */
13     
14     var div = document.getElementById(‘div1‘);
15     
16 //    div.ontouchstart = function(){
17 //        alert(1);
18 //    }
19 
20     div.addEventListener(‘touchstart‘,start);
21     div.addEventListener(‘touchmove‘,move);
22     div.addEventListener(‘touchend‘,end);
23     function start(){
24         console.log(‘按下‘);
25     }
26     function move(){
27         console.log(‘移动‘);
28     }
29     function end(){
30         console.log(‘抬起‘);
31     }

 

视口设置

1 <!--
2     viewport 视口(可视区窗口)
3         默认不设置viewport一般可视区宽度在移动端是980
4         width 可视区的宽度 (number||device-width)
5         user-scalable 是否允许用户缩放 (yes||no) iOS10无效 (我们放在事件章节解决)
6         initial-scale 初始缩放比例
7         minimum-scale 最小缩放比例
8         maximum-scale 最大缩放比例
9 -->

 

适配

 1 <script type="text/javascript">
 2 (function(){
 3     var w = window.screen.width;
 4     var targetW = 320;
 5     var scale = w/targetW; //当前尺寸/目标尺寸
 6     var meta = document.createElement("meta");
 7     meta.name = "viewport";
 8     meta.content = "user-scalable=no,initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale+""
 9     //console.log(scale);
10     document.head.appendChild(meta);
11 })();
12 </script>
13 <!--
14 <meta name="viewport" content="user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
15 -->

 

像素比

1 <script type="text/javascript">
2     alert(window.devicePixelRatio);
3     // n = window.devicePixelRatio
4     //像素比把一个像素 放大至 N个像素去显示 
5     //设计图最少750 
6 </script>

 

x5内核一些特性

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Document</title>
 6 <meta name="viewport" content="width=device-width,user-scalable=no">
 7 <meta name="x5-orientation" content="portrait" />
 8 <meta name="x5-fullscreen" content="true" />
 9 <meta name="screen-orientation" content="portrait">
10 <meta name="full-screen" content="yes">
11 <meta name="format-detection" content="telephone=no, email=no" />
12 </head>
13 <body>
14     <p>13888888888</p>
15     <a href="tel:18888888888">请拨打电话18888888888</a>
16     <a href="mailto:motao@motao.com">请发送邮件</a>
17 </body>
18 </html>

 

移动端IOS与Android的默认样式去除

<style type="text/css">
body {
    font-family: Helvetica;
}
body * {
    -webkit-text-size-adjust: 100%;
    -webkit-user-select: none; /*在事件章节 去兼容安卓*/
}
a, 
input, 
button{
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
input, 
button {
    -webkit-appearance: none;
    border-radius: 0;
}
</style>

 

移动端事件基础(pc存在的2个问题)

 1 <script type="text/javascript">
 2     /*
 3         注意:
 4             在移动端开发的时候,浏览器的模拟器时好时坏,一般不用on的方式绑定事件函数,要用事件绑定的方式(addEventListener)。
 5             
 6         pc上的事件比移动端的事件略慢,大概是在300ms左右。
 7 
 8 
 9                移动端的点透:
10             当上层元素发生点击的时候,下层元素也有点击(焦点)特性,
11             在300ms之后,如果上层元素消失或者隐藏,目标点就会“漂移”到
12             下层元素身上,就会触发点击行为。
13             
14         解决:
15             1.下层不要使用有点击(焦点)特性的元素。
16             
17             2.阻止pc事件。
18         
19         
20     */
21     
22     document.addEventListener(touchstart,function(ev){
23         ev.preventDefault();
24     });
25     
26     
27     var div = document.getElementById(div1);
28     //var p = document.getElementById(‘p‘);
29     var a = document.getElementById(a);
30     
31     div.addEventListener(touchend,end);
32     
33 //    p.addEventListener(‘touchstart‘,function(){
34 //        alert(‘1111‘);
35 //    });
36     
37     a.addEventListener(touchstart,function(){
38         window.location.href = http://www.miaov.com;
39     });
40 
41     
42     function end(){
43         this.style.display = none;
44     }
45     
46 </script>        
47     

 

移动端阻止pc事件的优点

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8" />
 5     <meta name="viewport" content="width=device-width,user-scalable=no"/>
 6     <title>Document</title>
 7 <style>
 8 body,html{
 9     width: 100%;
10     overflow: hidden;
11 }
12 #div1{
13     width:200px;
14     height: 200px;
15     background: red;
16     position: absolute;
17     top:0;
18     left:0;
19     opacity: .5;
20 }
21 #div2{
22     width:3000px;
23     height: 50px;
24     background: yellow;
25 }    
26 </style>
27 </head>
28 <body>
29     <p id="p">点我呀!</p>
30     <a href="http://www.miaov.com" id="a">点我呀!!!</a>
31     <div id="div1"></div>
32     <div id="div2"></div>
33     <input type="text" name="text" id="txt" value="" />
34 <script type="text/javascript">
35     /*
36         移动端的点透:
37             当上层元素发生点击的时候,下层元素也有点击(焦点)特性,
38             在300ms之后,如果上层元素消失或者隐藏,目标点就会“漂移”到
39             下层元素身上,就会触发点击行为。
40             
41         解决:
42             1.下层不要使用有点击(焦点)特性的元素。
43             
44             2.阻止pc事件。
45             
46             1.IOS10下设置meta禁止用户缩放是不可行的。(使用阻止pc事件就可以在IOS10下禁止用户缩放)
47             
48             2.解决IOS10下溢出隐藏的问题。
49             
50             3.禁止系统默认的滚动条、阻止橡皮筋效果
51             
52             4.禁止长按选中文字、选中图片、系统默认菜单
53             
54             5.解决点透问题
55             
56             6.也阻止了焦点元素的焦点行为(要正常使用:ev.stopPropagation()阻止冒泡)
57     */
58     
59     document.addEventListener(touchstart,function(ev){
60         ev.preventDefault();
61     });
62     
63     
64     var div = document.getElementById(div1);
65     var a = document.getElementById(a);
66     var txt = document.getElementById(txt);
67     
68     div.addEventListener(touchend,end);
69     
70     a.addEventListener(touchstart,function(){
71         window.location.href = http://www.miaov.com;
72     });
73 
74     txt.addEventListener(touchstart,function(ev){
75         ev.stopPropagation();
76     });
77     
78     function end(){
79         this.style.display = none;
80     }
81     
82     
83     
84     
85 </script>
86 </body>
87 </html>

 

移动端的事件对象

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8" />
 5     <meta name="viewport" content="width=device-width,user-scalable=no"/>
 6     <title>Document</title>
 7 <style>
 8 body,html{
 9     width: 100%;
10     overflow: hidden;
11 }
12 #div1{
13     width:200px;
14     height: 200px;
15     background: red;
16     position: absolute;
17     top:0;
18     left:0;
19     font-size:50px;
20     color: #fff;
21 }    
22 </style>
23 </head>
24 <body>
25     <div id="div1"></div>
26 <script type="text/javascript">
27     /*
28         当给某个元素加上了事件绑定函数之后,事件函数默认的第一个参数就是事件对象
29         事件对象:
30             当用户在浏览器下触发了某个行为,事件对象会记录用户操作时一些细节信息。
31         
32         touches 当前位于*屏幕*上的所有手指的一个列表
33 
34         targetTouches 位于当前DOM元素上的手指的一个列表
35 
36         changedTouches  涉及当前事件的手指的一个列表
37             
38     */
39     document.addEventListener(touchstart,function(ev){//阻止pc和浏览器的默认行为
40         ev.preventDefault();
41     });
42     var div = document.getElementById(div1);
43     
44     
45     div.addEventListener(touchmove,start);
46     function start(ev){
47         //this.innerHTML = ev.touches.length;
48         //this.innerHTML = ev.targetTouches.length;
49         this.innerHTML = ev.changedTouches.length;
50     }
51     
52     
53 </script>
54 </body>
55 </html>

 

 

加速度改变时触发 devicemotion 事件

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <meta name="viewport" content="width=device-width,user-scalable=no" />
 6 <title>Document</title>
 7 <style type="text/css">
 8 #box {
 9     width: 200px;
10     height: 200px;
11     background: Red;
12     color: #fff;
13     font-size: 20px;
14 }    
15 </style>
16 </head>
17 <body>
18 <div id="box"></div>
19 <script type="text/javascript">
20 (function(){
21     var box = document.querySelector(#box);
22     window.addEventListener(devicemotion, function(e) {
23         var motion = e.accelerationIncludingGravity;
24         var x = Math.round(motion.x);
25         var y = Math.round(motion.y);
26         var z = Math.round(motion.z;
27         box.innerHTML = "x:"+x;
28         box.innerHTML += "<br/>y:"+y;
29         box.innerHTML += "<br/>z:"+z;
30     });
31 })();    
32 </script>
33 </body>
34 </html>

 

判断手机是 ios 还是 android 设备

1 <script type="text/javascript">
2 var u = navigator.userAgent;
3 var isAndroid = u.indexOf(Android) > -1 || u.indexOf(Adr) > -1; 
4 var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
5 console.log(isiOS);
6 </script>

 

处理 ios 和 android 设备 对重力加速度的兼容性问题

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=no" />
<title>Document</title>
<style type="text/css">
#box {
    width: 200px;
    height: 200px;
    background: Red;
    color: #fff;
    font-size: 20px;
}    
</style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
(function(){
    var box = document.querySelector(#box);
    window.addEventListener(devicemotion, function(e) {
        var motion = e.accelerationIncludingGravity;
        var x = Math.round(motion.x);
        var y = Math.round(motion.y);
        var z = Math.round(motion.z);
        if(getAdr()){
            x = -x;
            y = -y;
            z = -z;
        }
        box.innerHTML = "x:"+x;
        box.innerHTML += "<br/>y:"+y;
        box.innerHTML += "<br/>z:"+z;
    });
})();    
function getAdr(){
    var u = navigator.userAgent;
    return u.indexOf(Android) > -1 || u.indexOf(Adr) > -1; 
}
</script>
</body>
</html>

 

手机摇一摇

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <meta name="viewport" content="width=device-width,user-scalable=no" />
 6 <title>Document</title>
 7 </head>
 8 <body>
 9 <script type="text/javascript">
10 (function(){
11     var lastX;
12     var lastY;
13     var lastZ;
14     var maxRang = 80;
15     var minRang = 10;
16     var isShake = false;
// 摇一摇 记录上次的加速度,和当前次的加速度相减 差值大于一定幅度的时候,就可以认定用户在进行摇一摇
17 window.addEventListener(devicemotion, function(e) { 18 var motion = e.accelerationIncludingGravity; 19 var x = Math.round(motion.x); 20 var y = Math.round(motion.y); 21 var z = Math.round(motion.z); 22 if(typeof lastX == "undefined"){ 23 lastX = x; 24 lastY = y; 25 lastZ = z; 26 return; 27 } 28 var dis = Math.abs(x - lastX) + Math.abs(y - lastY) + 29 Math.abs(z - lastZ); 30 if(dis > maxRang) { 31 isShake = true; 32 } 33 if(dis < minRang && isShake) { 34 isShake = false; 35 //执行 摇一摇之后,要操作的内容 36 alert("您晃动了手机"); 37 } 38 lastX = x; 39 lastY = y; 40 lastZ = z; 41 }); 42 })(); 43 </script> 44 </body> 45 </html>

 

检测手机的横竖屏切换

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=no" />
<title>Document</title>
<style type="text/css">
body,
html {
    margin: 0;
    height: 100%;
    position: relative;
    overflow: hidden;
}    
#box {
    width: 100%;
    height: 100%;
    font-size: 20px;
    position: relative;
}
#div {
    width: 100px;
    height: 100px;
    background: red;
}
#pop {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #000;
    color: #fff;
    line-height: 200px;
    font-size: 30px;
    text-align: center;
}
</style>
</head>
<body>
<div id="box">
    请保持竖屏观看哟
    <div id="div"></div>
</div>
<div id="pop">请不要横屏浏览页面</div>
<script type="text/javascript">
setChange();
window.addEventListener(orientationchange, function(e)
{
    setChange()
});
function setChange(){
    var pop = document.querySelector(#pop);
    if(window.orientation == 90 || window.orientation == -90)
    {
        pop.style.display = "block";
    } else {
        pop.style.display = "none";
    }
}
</script>
</body>
</html>

 

 

检测手机的角度切换

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <meta name="viewport" content="width=device-width,user-scalable=no" />
 6 <title>Document</title>
 7 <style type="text/css">
 8 #box {
 9     width: 200px;
10     height: 200px;
11     background: Red;
12     color: #fff;
13     font-size: 20px;
14 }    
15 </style>
16 </head>
17 <body>
18 <div id="box"></div>
19 <script type="text/javascript">
20 (function(){
21     var box = document.querySelector(#box);
22     window.addEventListener(deviceorientation, function(e) 
23     {
24         var x = Math.round(e.beta);
25         var y = Math.round(e.gamma);
26         var z = Math.round(e.alpha);
27         box.innerHTML = "x:"+x;
28         box.innerHTML += "<br/>y:"+y;
29         box.innerHTML += "<br/>z:"+z;
30     });
31 })();    
32 </script>
33 </body>
34 </html>

 

 

多指操作

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Document</title>
 6 <meta name="viewport" content="width=device-width,user-scalable=no" />
 7 <style type="text/css">
 8 #box {
 9     width: 200px;
10     height: 200px;
11     background: red;
12     color: #fff;
13     font-size: 30px;
14 }    
15 </style>
16 </head>
17 <body>
18 <div id="box"></div>
19 <script type="text/javascript">
20 document.addEventListener(touchstart, function(e) {
21     e.preventDefault();
22 });
23 window.onload = function(){
24     var box = document.querySelector(#box);
25     /*
26         当手指触摸元素,当前屏幕上有两根或者两根以上的手指执行
27     */
28     box.addEventListener(gesturestart, function(e) {
29         this.style.background = "blue";
30     });
31     /*
32         当我们触发了 gesturestart时,手指位置发生变化时执行
33     */
34     box.addEventListener(gesturechange, function(e) {
35         //e.scale; 缩放比:change时两根手指之间距离 和 start时两根手指之间的距离比值
36         //this.innerHTML = e.scale;
37         //e.rotation 旋转差: change时两根手指形成的直线和start时两根手指形成的直线,中间形成夹角
38         this.innerHTML = e.rotation;
39     });
40     /*
41         当我们触发了 gesturestart时,然后抬起手指,这时屏幕上的手指个少于2个或者当前元素没有手指了,就会触发gestureend
42     */
43     box.addEventListener(gestureend, function(e) {
44         this.style.background = "red";
45     });
46 };
47 </script>
48 </body>
49 </html>

 

 

封装多指操作

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4 <meta charset="UTF-8">
  5 <title>Document</title>
  6 <meta name="viewport" content="width=device-width,user-scalable=no" />
  7 <style type="text/css">
  8 #box {
  9     margin: 100px auto;
 10     width: 200px;
 11     height: 200px;
 12     background: url(1.jpg) no-repeat;
 13     background-size: cover;
 14 }    
 15 </style>
 16 </head>
 17 <body>
 18 <div id="box"></div>
 19 <script type="text/javascript" src="m.Tween.js"></script>
 20 <script type="text/javascript">
 21 document.addEventListener(touchstart, function(e) {
 22     e.preventDefault();
 23 });
 24 window.onload = function(){
 25     var box = document.querySelector(#box);
 26     var startRotate = 0;
 27     var startScale = 0;
 28     css(box,"translateZ",0.01);
 29     setGesture({
 30         el: box,
 31         start: function(e){
 32             //startRotate = css(this,"rotate");
 33             startScale = css(this,"scale");
 34         },
 35         change:function(e){
 36             css(this,"rotate",startRotate + e.rotation);
 37             css(this,"scale",startScale * e.scale);
 38         }
 39     })
 40 };
 41 /*
 42     init:{
 43         el:element//元素, (必填)
 44         start:fn//gesturestart要做的操作,
 45         change:fn//gesturechange要做的操作,
 46         end:fn//gestureend要做的操作
 47     }
 48 
 49     勾股定理:已知直角三角形的两条直角边,求斜边的长度
 50 
 51      斜边*斜边 = (直角1*直角1) + (直角2*直角2)
 52 */
 53 function getDis(point1,point2){
 54     var x = point2.x - point1.x;
 55     var y = point2.y - point1.y;
 56     return Math.sqrt(x*x + y*y);
 57 }
 58 // Math.atan2(y,x) 斜率 由一条直线与X轴正方向所成角的正切 返回值弧度
 59 // 角度转弧度: deg*Math.PI/180
 60 //弧度转角度: rad*180/Math.PI 
 61 function getDeg(point1,point2){
 62     var x = point2.x - point1.x;
 63     var y = point2.y - point1.y;
 64     return Math.atan2(y,x)*180/Math.PI; 
 65 }
 66 function setGesture(init){
 67     var el = init.el;
 68     var isGestrue = false; 
 69     var startPoint = [];
 70     if(!el){
 71         return;
 72     }
 73     el.addEventListener(touchstart, function(e) {
 74         if(e.touches.length >= 2){
 75             isGestrue = true; //记录当前用户触发了gesture
 76             startPoint[0] = {x:e.touches[0].pageX,y:e.touches[0].pageY};
 77             startPoint[1] = {x:e.touches[1].pageX,y:e.touches[1].pageY}; 
 78             init.start&&init.start.call(el,e);
 79         }
 80     });
 81     el.addEventListener(touchmove, function(e) {
 82         if(isGestrue&&e.touches.length >= 2){
 83             var nowPoint = [];
 84             nowPoint[0] = {x:e.touches[0].pageX,y:e.touches[0].pageY};
 85             nowPoint[1] = {x:e.touches[1].pageX,y:e.touches[1].pageY};
 86             var startDis = getDis(startPoint[0],startPoint[1]);
 87             var nowDis = getDis(nowPoint[0],nowPoint[1]);
 88             var startDeg = getDeg(startPoint[0],startPoint[1]);
 89             var nowDeg = getDeg(nowPoint[0],nowPoint[1]);
 90             e.scale = nowDis/startDis;
 91             e.rotation = nowDeg - startDeg;
 92             init.change&&init.change.call(el,e);
 93         }
 94     });
 95     el.addEventListener(touchend, function(e) {
 96         if(isGestrue){
 97             if(e.touches.length < 2 || e.targetTouches.length < 1){
 98                 isGestrue = false;
 99                 init.end&&init.end.call(el,e);
100             }
101         }
102     });
103 }
104 </script>
105 </body>
106 </html>

 

移动端开发

上一篇:通知实战 设置通知图片(iOS10以后的)


下一篇:指针练习题