前言
当下移动端横行，平常我们做一些移动端的项目，接触最多的就是H5，虽然做移动端不用兼容IE，但是
我们要兼容微信、app、ios、android... 今天就给写几个平常开发经常会遇到的问题以及解决办法。
初入前端，若有不足 欢迎指正！头部初始化
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<meta id=”viewport” name=”viewport” content=”width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no”>
<meta name=”MobileOptimized” content=”320″>
<meta name=”format-detection” content=”telephone=no”>
</head>
</html>1.audio标签问题
一般要添加背景音乐的话，我们的第一反应就是使用audio标签，但是这里有一个坑。如果你的项目是一进页面就要播放音乐的话，audio标签在微信端是不生效的。这时候我们可以添加如下代码：
document.addEventListener("WeixinJSBridgeReady", function () {
audioAutoPlay(‘XXX’);//给一个全局函数
},false);
//兼容ios微信不能一打开就播放音乐
function audioAutoPlay(id){ //全局控制播放函数
var audio = document.getElementById(id),
play = function(){
audio.play();
document.removeEventListener(“touchstart”,play,false);
};
audio.play();
document.addEventListener(“touchstart”,play,false);
}原理：
- 我们给一它一个全局的函数，自动执行一次就可以了。
2.video标签问题
a. app里面不能控制随心所欲的控制视频的播放和暂停。
解决办法：
var video=$("#video")[0];
$("#video").click(function(){
if($(this).hasClass("pls")){
video.play();
}else{
video.pause();
}
$("#video").toggleClass("pls")
})如果出现这种情况的话，我们就不能使用系统自带的控制播放和暂停的功能了，需要我们自己封装一段控制播放和暂停的方法出来。b.微信端自动播放
<!-- 必须加在微信api资源 -->
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
//一般情况下，这样就可以自动播放了，但是一些奇葩iPhone机不可以
document.getElementById('car_audio').play();
//必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效
document.addEventListener("WeixinJSBridgeReady", function () {
document.getElementById('car_audio').play();
document.getElementById('video').play();
}, false);
//若是还不能解决，换成这样
document.getElementById('video2').play();
wx.getNetworkType({
success: function (res) {
console.log('res is',res);
document.getElementById('video2').play();
}
});
</script> 3.弹出键盘问题
ios手机弹出键盘有时候会遮住输入框，给人一种很不爽的体验，但是这种情况很少出现。下面简单介绍一下解决办法：
keyboardEvent:function($footer,winHeight){
//这里默认软键盘的高度小于屏幕高度的二分之一
$(window).resize(function(){
var currentWinHeight = $(window).height();
if(isInputsFocus($(‘input’)) && currentWinHeight < winHeight/1.2){
//键盘弹出
$footer.hide()
}
if(currentWinHeight >= winHeight/1.2){
//键盘收起
$footer.show()
}
});
}
Var isInputsFocus = function($inputs){
if($inputs && $inputs.length > 0){
for(var i=0;i<$inputs.length;i++){
if($($inputs[i].is(“:focus”))){
return true
}
}
return false
}
return false
}4.获取文档滚动高度
常用的获取方式是 document.documentElement.scrollTop 但是在手机上不生效。查了好久也不知道哪里有问题。后来偶然发现document.body.scrollTop 就生效了，但是PC又不行了，所以建议大家做一下判断5.zepto获取select文本
我们平常使用的是
$("#select").val()//获取option的value值；
$("#select").find("option:selected").text()//获取option的文本但是在使用zepto的时候竟然报错。研究好久不晓得是什么原因。后来查了下zepto的api 发现获取方法改了。现在是
$("#select option").not(function(){ return !this.selected }).val()//获取value值
$("#select option").not(function(){ return !this.selected }).text()//获取文本值6.swiper图片超出父级盒子
给img添加
window.onload = function () {
var u = navigator.userAgent;
if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {//安卓手机
phoneType = 0;
} else if (u.indexOf('iPhone') > -1) {//苹果手机
phoneType = 1;
} else if (u.indexOf('Windows Phone') > -1) {//winphone手机
phoneType =2;
}
};7.帧动画的简单实现
var timeout = 1000; //每隔100ms
var index = 1;
var am,
am = setInterval(function () {
if (index >= $(".roll").length) {
$(".roll").removeClass("run");
clearInterval(am);
$('.goinfo').removeClass('hide');
console.log('res enter');
} 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,textarea,p,blockquote,th,td{
margin:0;
padding:0;
}
a {
text-decoration: none;
}
ul,ol {
margin: 0;
padding: 0;
list-style: none;
}
img {vert-align: top;} //移动端图片边框 相当于 border:0
a,
input,
button {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
//-webkit-tap-highlight-color:rgba(0,0,0,0);//透明度设置为0，去掉点击链接和文本框对象时默认的灰色半透明覆盖层(iOS)或者虚框(Android)
input，textarea{outline:none}
//取消chrome下默认的文本框聚焦样式
-webkit-appearance: none;
//消除输入框和按钮的原生外观，在iOS上加上这个属性才能给按钮和输入框自定义样式
-webkit-user-select: none;
// 禁止页面文字选择 ，此属性不继承，一般加在body上规定整个body的文字都不会自动调整
input,
button {
-webkit-appearance: none;
border-radius: 0;
}
//去掉IOS移除原生控件样式
-webkit-touch-callout:none;
// 禁用长按页面时的弹出菜单
body {
margin: 0;
-webkit-user-select: none;
}
//禁止移动端用户进行复制.选择.
body * {
-webkit-user-select: none;
font-family: Helvetica;
}
body {
-webkit-text-size-adjust: 100%;
}
//移动端横竖屏字体乎大乎小
-webkit-text-size-adjust: none;
//禁止文字自动调整大小(默认情况下旋转设备的时候文字大小会发生变化)，此属性也不继承，一般加在body上规定整个body的文字都不会自动调整 