判断当前移动设备是Android或者是IOS
(function () {
var u = navigator.userAgent,
app = navigator.appVersion;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
alert('是否是Android：' + isAndroid);
alert('是否是iOS：' + isiOS);
if (isAndroid) {
$("#choose").attr('capture', 'camera');
}
})();
判断当前设备是不是全面屏，结合上面代码一起使用
/**判断屏幕大小 */
function judgeBigScreen() {
//，这里根据返回值 true 或false ,返回true的话 则为全面屏
let result = false;
const rate = window.screen.height / window.screen.width;
let limit = window.screen.height == window.screen.availHeight ? 1.8 : 1.65; // 临界判断值
// window.screen.height为屏幕高度
// window.screen.availHeight 为浏览器 可用高度
if (rate > limit) {
result = true;
}
console.log(result)
return result;
};
(function () {
var u = navigator.userAgent,
app = navigator.appVersion;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
alert('是否是Android：' + isAndroid);
alert('是否是iOS：' + isiOS);
if (isAndroid) {
//$("#choose").attr('capture', 'camera');
}
judgeBigScreen(); //判断当前设备是否为IOS全面屏
})();
qq浏览器和qq内置浏览器判断
安卓和ios对于qq浏览器和qq内置浏览器判断不同
①Android：
QQ内置环境的ua中有关键字 MQQBrowser， 并且后面包含一个【空白符+QQ】字符；QQ浏览器仅有【MQQBrowser】。
QQ内置浏览器：正则判断ua中包含MQQBrowser，并且剔除【MQQBrowser】之后包【空白符+QQ】
QQ浏览器：ua中包含MQQBrowser但是不包含QQ
②ios：
QQ内置浏览器： ua包含一个空格加QQ，但是不包含MQQBrowser
QQ浏览器： ua包含MQQBrowser但是不包含单独的QQ
indexOf() 方法返回调用它的String 对象中第一次出现的指定值的索引，从fromIndex 处进行搜索。
如果未找到该值，则返回-1。
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
//android终端或者uc浏览器
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
console.log("是否是Android：", + isAndroid);
console.log("是否是iOS：", + isiOS);
let result = false;
const rate = window.screen.height / window.screen.width;
let limit = window.screen.height == window.screen.availHeight ? 1.8 : 1.65;
// 临界判断值
if (rate > limit) {
result = true;
}
console.log("window:",window.screen);
console.log("VConsole屏幕高度：",window.screen.height);
// window.screen.availHeight 为浏览器 可用高度
console.log("VConsole浏览器 可用高度：",window.screen.availHeight);
console.log("VConsoleresult是否为全面屏:",result);
// 判断qq内置浏览器和微信内置浏览器
var ua = navigator.userAgent.toLowerCase(),
isWx = false,isQQ = false, isQQInstalled = false;
console.log("ua",ua);
if(isAndroid && ua.indexOf('mqqbrowser')> -1 &&ua.indexOf(' qq')>-1){
console.log("安卓端qq内置浏览器");
}
if(isAndroid && ua.indexOf('mqqbrowser')> -1&&ua.indexOf(' qq')<0){
console.log("安卓端QQ浏览器");
}
if(isiOS && ua.indexOf('mqqbrowser') <0 && ua.indexOf(' qq')>-1 ){
console.log("IOS端qq内置浏览器");
}
if(isiOS && ua.indexOf('mqqbrowser')> -1&&ua.indexOf(' qq')<0){
console.log("IOS端QQ浏览器");
}
if (ua.match(/MicroMessenger/i) == 'micromessenger') {
//微信浏览器
isWx = true;
console.log("微信浏览器");
// return;
}
if(ua.indexOf('Safari')>-1){
// return true;
console.log("ios内置；浏览器Safari浏览器");
}
以ios为例，使用qq内置浏览器打开效果图：
以ios为例，使用qq浏览器打开效果图：
前端调试使用vConsole，非常方便：
是tencent下的开源前端插件：github下载使用
直接使用https://github.com/Tencent/vConsole/tree/dev/dist下的vconsole.min.js即可
https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js
我使用的uniapp
①引入var VConsole = require("@/static/js/vconsole.min.js")
②mounted创建一个对象
mounted () {
var vConsole = new VConsole();
}
chrome中模拟微信浏览器
①安卓QQ内置浏览器UA
Mozilla/5.0 (Linux; Android 5.0; SM-N9100 Build/LRX21V) > AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 > Chrome/37.0.0.0 Mobile Safari/537.36 V1_AND_SQ_5.3.1_196_YYB_D > QQ/5.3.1.2335 NetType/WIFI
②安卓微信内置浏览器UA
Mozilla/5.0 (Linux; Android 5.0; SM-N9100 Build/LRX21V) > AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 > Chrome/37.0.0.0 Mobile Safari/537.36 > MicroMessenger/6.0.2.56_r958800.520 NetType/WIFI
③IOSQQ内置浏览器UA
Mozilla/5.0 (iPhone; CPU iPhone OS 7_1_2 like Mac OS X) > AppleWebKit/537.51.2 (KHTML, like Gecko) Mobile/11D257 > QQ/5.2.1.302 NetType/WIFI Mem/28
④IOS微信内置浏览器UA
Mozilla/5.0 (iPhone; CPU iPhone OS 7_1_2 like Mac OS X) > AppleWebKit/537.51.2 (KHTML, like Gecko) Mobile/11D257 > MicroMessenger/6.0.1 NetType/WIFI
操作：F12 检查->三个点找到setting->设备device->添加设备中
一个屏幕尺寸大全网址参考网址
安卓中微信内置浏览器会显示是qq浏览器，所以要区分安卓的qq内置浏览器，微信内置浏览器和qq浏览器不能通用iOs的判断方法。 解决：判断是否是qq应用，是否是微信应用，如果都不是怎代表不是应用是任何的浏览器打开的，再用判断是否是qq浏览器的判断方法即可
var u = navigator.userAgent;
var ua = navigator.userAgent.toLowerCase();
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
//android终端或者uc浏览器
if(isAndroid){
var isQQ = navigator.userAgent.split(" ")
.map(function(str){
return str.split("/")[0];
}).findIndex(function(str){
return str == "QQ";
}) != -1;
var isWeixin = navigator.userAgent.split(" ")
.map(function(str){
return str.split("/")[0];
}).findIndex(function(str){
return str == "WeChat";
}) != -1;
if(!isQQ && !isWeixin && navigator.userAgent.indexOf("QQBrowser") != -1){
console.log("andriodqq浏览器");
}else{
//默认浏览器}
}