判断当前移动设备是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{//默认浏览器}
}