前言当前移动端横行。平时我们做一些移动端的项目，接触最多的就是H5。移动端虽然不需要兼容IE，但是我们一定要兼容微信、app、ios、android……今天写下平时开发中经常遇到的几个问题和解决方法。刚接触前端，有不足之处还望指正！头部初始化
1.音频标签问题一般如果要加背景音乐，我们的第一反应是使用音频标签，但是有这里有个坑，如果你的项目是一进页面就播放音乐，微信端audio标签是不会生效的。这时候我们可以添加如下代码：document.addEventListener("WeixinJSBridgeReady",function(){audioAutoPlay('XXX');//给一个全局函数},false);//兼容ios微信不能一开就播放音乐的功能audioAutoPlay(id){//全局控制播放函数varaudio=document.getElementById(id),play=function(){audio.play();document.removeEventListener(“touchstart”,play,false);};声音的。玩（）;document.addEventListener(“touchstart”,play,false);}原理：我们给它一个全局函数，可以自动执行一次。2.视频标签问题App无法随心控制视频的播放和暂停。解决方法：varvideo=$("#video")[0];$("#video").click(function(){if($(this).hasClass("pls")){video.play();}else{video.pause();}$("#video").toggleClass("pls")})如果出现这种情况，我们将无法使用系统自带的控制播放和暂停功能，需要自己封装一个方法来控制播放和暂停。b.微信端自动播放3.弹窗键盘问题ios手机的弹出键盘有时会盖住输入框，给人一种很不舒服的体验，但这种情况很少发生。下面简单介绍一下解决方法：keyboardEvent:function($footer,winHeight){//这里默认软键盘的高度小于屏幕高度的一半$(window).resize(function(){varcurrentWinHeight=$(window).height();if(isInputsFocus($('input'))&¤tWinHeight=winHeight/1.2){//键盘从$footer.show()}});}VarisInputsFocus=function($inputs){if($inputs&&$inputs.length>0){for(vari=0;i<$inputs.length;i++){if($($inputs[i].is(“:focus”))){returntrue}}returnfalse}returnfalse}4.获取文档滚动高度的常用方法是document.documentElement上面的.scrollTop不生效。找了半天也不知道问题出在哪里。后来无意中发现document.body.scrollTop生效了，但是PC没有生效，所以建议大家判断一下5.zepto获取select文本。我们通常使用$("#select").val()//获取选项值；$("#select").find("option:selected").text()//获取选项的文本但是使用zepto时报错。研究了很久，不知道为什么。后来查看了zepto的api，发现获取方式变了。现在是$("#selectoption").not(function(){return!this.selected}).val()//获取值$("#selectoption").not(function(){return!this.selected}).text()//获取文本值6.swiper图片超出父框添加window.onload=function(){varu=navigator.userAgent;if(u.indexOf('Android')>-1||u.indexOf('Linux')>-1){//AndroidphoneType=0;}elseif(u.indexOf('iPhone')>-1){//苹果手机类型=1;}elseif(u.indexOf('WindowsPhone')>-1){//winphonephoneType=2;}};7。帧动画的简单实现vartimeout=1000;//每100毫秒varindex=1;varam,am=setInterval(function(){if(index>=$(".roll").length){$(".roll").removeClass("run");clearInterval(am);$('.goinfo').removeClass('hide');console.log('resenter');}else{$(".roll").eq(index++).addClass("run");}},timeout);body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,文本区域，p，blockquote,th,td{保证金：0;填充：0；}a{文本装饰：无；}ul，ol{边距：0；填充：0；list-style:none;}img{vert-align:top;}//移动端图片边框相当于border:0a,input,button{-webkit-tap-highlight-color:rgba(0,0,0,0);}//-webkit-tap-highlight-color:rgba(0,0,0,0);//透明度设置为0，去掉默认的灰色半透明覆盖（iOS）或虚框（Android）输入，textarea{outline:none}whenclickonlinksandtextboxobjects//取消chrome下默认的文本框焦点样式-webkit-appearance:none;//取消输入框和按钮的原生外观，iOS上添加该属性自定义按钮和输入框的样式-webkit-user-select:none;//禁止页面文本选择，该属性不继承，一般加在body中，规定整个body文本不会自动调整输入,按钮{-webkit外观：无；border-radius:0;}//去除IOS去除原生控件样式-webkit-touch-callout:none;//禁用长按页面主体时的弹出菜单{margin:0;-webkit-user-select:none;}//禁止移动用户复制.Select.body*{-webkit-user-select:none;font-family:Helvetica;}body{-webkit-text-size-adjust:100%;}//手机横竖屏字体有大有小-webkit-text-size-adjust:none;//禁止自动调整文字大小（默认情况下，设备旋转时文字大小会发生变化），这个属性是不继承的，一般加到body中来规定整个body的文字不会自动调整
