移动端H5一些小坑(持续更新)

目录

前言

当下移动端横行，平常我们做一些移动端的项目，接触最多的就是H5，虽然做移动端不用兼容IE，但是我们要兼容微信、app、ios、android... 今天就给写几个平常开发经常会遇到的问题以及解决办法。初入前端，若有不足 欢迎指正！

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标签问题

说完audio，我们来说一下video。这个video有很多坑。

1. 视频格式。

这个很少出问题，不多解释，有问题一般都是编码格式不对，自己转换一下就可以了。

2. ios11 下功能不可用。

这个情况暂时我只是知道ios11系统有这个问题。解决方案也很简单：
弄一张缩略图放上去，控制播放和暂停的事件写在图片上面就能解决

3. app里面不能控制随心所欲的控制视频的播放和暂停。

解决办法：```javascript    var video=$("#video")[0];    $("#video").click(function(){              if($(this).hasClass("pls")){                    video.play();              }else{                    video.pause();        }        $("#video").toggleClass("pls")    })```

如果出现这种情况的话，我们就不能使用系统自带的控制播放和暂停的功能了，需要我们自己封装一段控制播放和
暂停的方法出来。

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又不行了，所以建议大家做一下判断