H5页面遇到的BUG

最近写了个H5的小页面，遇到一些兼容问题，记录下（主要针对QQ和微信 ），

一、.调 用手机相机或相册功能：

type="file" name="imgfile" id="camera">

一开始是这样写的：

type="file" name="imgfile" accept="image/*" capture="camera" id="camera">

经过测试发现这种写法并不能同时兼容安卓和IOS手机，具体表现为：

安卓手机在QQ和微信浏览器都可以正常使用，浏览器是直接调相机，不能选择相册（因需求对浏览器没要求，暂不做处理）

IOS手机最开始qq和微信也是可以的，后来升级了个10.3.1的版本就不能选择相册了，估计苹果对相册权限做了处理什么的吧，具体也不清楚……反正结果就是相册不能选了

从网上找了相关资料，换了另一种写法试了试：

type="file" accept="image/*; capture=camera" name="imgfile" id="camera">

效果：

安卓不能调相机了，直接打开图片选择面板……

IOS可以正常选择相机或相册

综合考虑，为了实现功只能想到这样处理代码（JS控制）：

var u = navigator.userAgent.toLowerCase();
var isApple = /(iphone|ipad|ipod|ios)/i.test(u);
var isAndroid = /android/i.test(u);

if(isApple){ //apple 终端 $( '#camera').attr( 'accept' , 'image/*;capture=camera') ; } else if(isAndroid){ // 安卓终端 $( '#camera').attr( 'accept' , 'image/*').attr( 'capture' , 'camera') ;}

二、刷新页面在安卓微信浏览器中不起作用的问题

history.go(0);

现象：

IOS  QQ和微信正常使用

安卓客户端 QQ李没问题，微信上无反应

原因：

缓存问题，安卓上面微信里执行刷新操作时，页面无改动的情况下是从缓存中加载文档，并没有真的执行刷新，所以点击不会刷新页面

解决办法：

分情况处理，区分安卓和IOS 区分微信浏览器， 使用window.location.href

function isWeiXin(){
    var ua = window.navigator.userAgent.toLowerCase();
    if(ua.match(/MicroMessenger/i) == 'micromessenger'){
        return true;
    }else{
        return false;
    }
}

if(isApple){
    //apple终端
    $('.errorFresh').on('click',function () {
        history.go(0); //刷新
    });
}else if(isAndroid){
    //安卓终端
    if(isWeiXin()){
        $('.errorFresh').on('click',function () {
            window.location.href='url'; //跳转
        });
    }
}

以上，并不是最好的方法，至少能解决问题。
希望以后能发现更好的办法。

——每一天都是进步