最近写了个H5的小页面,遇到一些兼容问题,记录下(主要针对QQ和微信 ),
一、.调 用手机相机或相册功能:
<input type="file" name="imgfile" id="camera">
一开始是这样写的:
<input type="file" name="imgfile" accept="image/*" capture="camera" id="camera">
经过测试发现这种写法并不能同时兼容安卓和IOS手机,具体表现为:
安卓手机在QQ和微信浏览器都可以正常使用,浏览器是直接调相机,不能选择相册(因需求对浏览器没要求,暂不做处理)
IOS手机最开始qq和微信也是可以的,后来升级了个10.3.1的版本就不能选择相册了,估计苹果对相册权限做了处理什么的吧,具体也不清楚……反正结果就是相册不能选了
从网上找了相关资料,换了另一种写法试了试:
<input 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'; //跳转 }); } }
以上,并不是最好的方法,至少能解决问题。
希望以后能发现更好的办法。
——每一天都是进步