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>