解决移动端开发H5页面点击按钮后出现闪烁或黑色背景
*{
-webkit-tap-highlight-color:transparent;
}设备识别
// 判断pc端还是移动端
function isPC() {
var userAgentInfo = navigator.userAgent;
var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
var flag = true;
for (var i = 0; i < Agents.length; i++) {
if (userAgentInfo.indexOf(Agents[i]) > 0) {
flag = false;
break;
}
}
return flag;
}
// 判断用户移动端使用的系统平台
function isMobile() {
var u = navigator.userAgent;
if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {
return "Android!"; // 安卓手机
} else if (u.indexOf('iPhone') > -1) {
return "iPhone!"; // 苹果手机
} else if (u.indexOf('iPad') > -1) {
return "iPad!"; // iPad手机
} else if (u.indexOf('Windows Phone') > -1) {
return "Windows Phone!"; // winphone手机
} else {
return false;
}
}
// 判断用户是否在微信中打开
function isWeChat() {
// toLowerCase() 方法用于把字符串转换为小写。
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf('micromessenger') != -1) {
return true;
} else {
return false;
}
}
alert(`是否PC: ${isPC()} \n是否移动端: ${isMobile()} \n是否微信: ${isWeChat()}`);
全屏非全屏互切
// 进入全屏
function requestFullScreen() {
const { documentElement } = document;
if (documentElement.requestFullscreen) {
documentElement.requestFullscreen();
} else if (documentElement.mozRequestFullScreen) {
documentElement.mozRequestFullScreen();
} else if (documentElement.webkitRequestFullScreen) {
documentElement.webkitRequestFullScreen();
}
}
// 退出全屏
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}
