移动端开发 -云博客

移动端开发

# 移动开发 2024-05-05 22:18 0 143 来源：云博客

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一般可视区宽度在移动端是9804 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.devicePixelRatio4 //像素比把一个像素 放大至 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个或者当前元素没有手指了，就会触发gestureend42 */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>